Les feuilles de style CSS Vertical aligner le texte dans l'absolu placé paragraphe

Avant de commencer:

Merci de ne pas fermer cette comme un doublon d'une autre question. J'ai juste cherché ici sur Stackoverflow, sans trouver exactement le cas.

La plus proche est je crois cette question. Encore, les réponses étant donné que l'on n'a pas vraiment fonctionné pour moi, je crois parce que le paragraphe est défini position: absolute;.

C'est le code HTML:

<ul>
    <li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li>
</ul>

Et le CSS:

li {
  position: relative;
  float: left;
  overflow: hidden;
}

img {
  width: 100%;
  vertical-align: middle;
}

p {
  background-color: rgba(255, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

span {
    background-color: rgba(0, 255, 0, .3);
    vertical-align: middle;
}

Violon: http://jsfiddle.net/DpVjZ/

vertical-align: middle; juste bosses le texte un tout petit peu loin du sommet, mais pas vraiment dans le milieu.

Réglage de la durée de position: absolute; puis en appliquant top: 50%; et puis margin-top: -x%; ne fonctionnera pas parce que la hauteur de l'étendue de mesure n'est pas connu comme il est contenu dynamique.

Bien que la question liée déclare que c'est une mauvaise pratique, j'ai aussi essayé la display: table-cell approche, sans aucun résultat. S'il vous plaît aider moi.

Pourquoi avez-vous un niveau de bloc d'un élément à l'intérieur d'un élément de la liste? Ne pensez-vous pas que c'est pourquoi vous rencontrez des problèmes?
Autant que je sache, le seul de la liste des éléments qui ne sont pas autorisés à contenir des éléments de niveau bloc sont dt.
Vous pouvez bien sûr régler l'élément de la liste à display:block;. Je pense que vous êtes l'approche du problème par le mauvais bout de la lorgnette. Qu'essayez-vous de réaliser? Visuellement, qu'est-il censé ressembler? Le texte est-il censé être sur le haut de l'image?
c'est une question poilu
Oui, le texte est censé être sur le haut de l'image, centrée verticalement et horizontalement. Réglage de l'élément de la liste à display: block; ne fait rien pour moi, pourriez-vous préciser un peu plus?

OriginalL'auteur Sven | 2013-01-21

2

Se débarrasser de la balise p. Vous l'avez déjà dans un li de toute façon.

css
```
li {
position: relative;
float: left;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
}

span {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}
```
html
```
<ul>
<li><span>Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>
```
Testé sur la fenêtre de IE9 et Chrome.

Ne sais pas si c'était pour la démo ou pas, mais si vous voulez la teinte de rouge sur l'image faire une classe pour une balise span puis insérez une nouvelle durée de avec la classe.
```
span.text {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

span.redshade {
background-color: rgba(255, 0, 0, .3);
width: 100%;
height: 100%;

<ul>
<li><span class="redshade">&nbsp;</span><span class="text">Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>
```
Merci! J'aime la façon dont votre solution offre un excellent résultat et est facile à comprendre, trop.
Haut: 46% est de coder en dur une supposition à propos de la hauteur de la durée; il n'est pas centré pour un arbitraire durée.
Oui, c'est une ligne de texte de la solution. Multi-ligne solutions sont beaucoup plus complexes. Il est centré pour un arbitraire de la taille de l'image. Il poursuivra également les travaux ont été la durée et de l'image sont connus.
Merci pour la sélection.

OriginalL'auteur fredsbend
10

Sans coder en dur une hypothèse de hauteur pour le texte ou l'image, j'ai (malheureusement) ne peut pas résoudre cela en moins de 3 couches:
1. Établir le positionnement absolu
2. Établir le tableau de mise en page
3. Établir table-cell mise en page et vertical-align: middle
Combinaison de 1 et 2 semble empêcher hauteur: 100% de travail pour des raisons inconnues de moi. Je pense que le rejet de la table-cell mise en page semble être un détournement de la vieille "de ne pas utiliser les tableaux pour la mise en page" mème; CSS pour la mise en page donc ce n'est pas une utilisation abusive de l'élément sémantique. (Bien que, malheureusement, il nécessite sémantiquement vide de sens divs.)
```
<ul>
<li>
    <img src="http://www.placehold.it/300x200" />
    <div class="absolute">
        <div class="table">
            <div class="middle">
                <p><span>Lorem Ipsum</span>
                </p>
            </div>
        </div>
    </div>
</li>
</ul>


li {
    position: relative;
    float: left;
    overflow: hidden;
}
img {
    width: 100%;
}
.absolute, .table, .middle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.absolute {
    position: absolute;
}
.table {
    display: table;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
p {
    background-color: rgba(255, 0, 0, .3);
}
span {
    background-color: rgba(0, 255, 0, .3);
}
```
http://jsfiddle.net/svachalek/vTGxx/4/

+1 C'est un peu compliqué, mais ne compte pour l'inconnu largeurs et hauteurs. J'ai édité ton post pour text-align:center la balise p et mis à jour le violon et nettoyage du code.

OriginalL'auteur svachalek

L'alignement Vertical est une chose la plus délicate dans le CSS, mais pas difficile à accomplir lorsque u sont familiers avec des règles css.

<style>
      html, body, #wrapper { height: 100%; }
      #wrapper { display: table; width: 100%; } /* Create space */
      #wrapper > * { display: table-cell; vertical-align: middle; } /* table-cells can be verticaly aligned! */
      #wrapper > * > .container { display: block; margin: auto; width: 600px; border: 1px solid #000000; } /* Horizontal align */
</style>

<div id="wrapper">
  <section id="main">
    <div class="container">
      <p>
        I'm centered in a fluid layout! :D
      </p>
    </div>
  </section>
</div>

MODIFIER
Haut lieu de cet élément sur le dessus de l'autre il suffit de faire le #wrapper position: fixed; height: 100%; width: 100%; left: 0px; top: 0px; ou à l'intérieur d'un élément d'utiliser position: absolute;

OriginalL'auteur Chris Visser

Vous devez vous connecter pour publier un commentaire.