web-dev-qa-db-fra.com

L'alignement vertical ne fonctionne pas sur le bloc en ligne

On m'a dit que:

L'alignement vertical ne fonctionne que pour les éléments en ligne, les blocs en ligne, les images et les éléments de tableau.
Il doit être appliqué sur l'élément enfant, contrairement à l'élément parent, contrairement à text-align.

Cependant, lorsque j'ai essayé de définir l'alignement vertical du milieu sur un élément de bloc en ligne, cela n'a pas fonctionné. Pourquoi?

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}
<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>
htmlcssinlinevertical-alignment
12
frosty

Cela ne fonctionne pas parce que vertical-align définit l'alignement du contenu de niveau en ligne par rapport à leur boîte de ligne, pas leur bloc conteneur:

Cette propriété affecte le positionnement vertical à l'intérieur d'une zone de ligne des zones générées par un élément de niveau en ligne.

A encadré est

La zone rectangulaire qui contient les boîtes qui forment une ligne

Lorsque vous voyez du texte qui comporte plusieurs lignes, chacune est une zone de ligne. Par exemple, si vous avez

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

enter image description here

S'il n'y a qu'une seule ligne, comme dans votre cas, c'est aussi une boîte de ligne

enter image description here

En utilisant vertical-align: middle centres .content verticalement à l'intérieur de cette zone de ligne. Mais le problème est que la boîte de ligne n'est pas centrée verticalement à l'intérieur du bloc conteneur.

Si vous souhaitez centrer quelque chose verticalement au milieu du bloc contenant, voir Comment aligner verticalement le texte en div avec CSS?

22
Oriol

Vertical-align sur l'élément inline/inline-block, les images, le texte ... aligner l'élément ensemble, pas avec le parent.

Exemple d'utilisation: aligner l'image d'un smiley dans un texte

vous pouvez tricher en ajoutant un pseudo-élément de 0px de largeur et 100% de hauteur

#wrapper {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    vertical-align: middle;
}
#wrapper:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}
#content {
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}
<div id = 'wrapper'>
    <div id = 'content'> content </div>
</div>
3
Yukulélé

Cela fonctionne pour moi en utilisant vertical-align: text-top;

<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>

.box {
   display: inline-block;
   width: 20%;
   margin: 5px;
   padding:10px;
   border-top: 5px solid #000000;
   vertical-align: text-top;
}

jsfiddle

1
fede