Question Alignement vertical des éléments dans une div


J'ai un div avec deux images et un h1. Tous doivent être alignés verticalement dans le div, l'un à côté de l'autre.

Une des images doit être absolute positionné dans la div.

Quel est le CSS nécessaire pour que cela fonctionne sur tous les navigateurs courants?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

561
2017-09-17 02:53


origine


Réponses:


Wow, ce problème est populaire. Il est basé sur un malentendu dans le vertical-align propriété. Cet excellent article l'explique:

Compréhension vertical-alignou "Comment (pas) centrer verticalement le contenu" par Gavin Kistner.

"Comment centrer en CSS" est un excellent outil web qui aide à trouver les attributs de centrage CSS nécessaires pour différentes situations.


En un mot (et pour empêcher la pourriture du lien):

  • Éléments en ligne (et seulement éléments en ligne) peuvent être alignés verticalement dans leur contexte via vertical-align: middle. Cependant, le "contexte" n'est pas la hauteur totale du conteneur parent, c'est la hauteur de la ligne de texte dans laquelle ils se trouvent. Exemple de jsfiddle
  • Pour les éléments de bloc, l'alignement vertical est plus difficile et dépend fortement de la situation spécifique:
    • Si l'élément interne peut avoir un hauteur fixe, vous pouvez faire sa position absolute et spécifiez son height, margin-top et top position. Exemple de jsfiddle
    • Si l'élément centré consiste en une seule ligne  et  sa hauteur de parent est fixe vous pouvez simplement définir le conteneur line-height pour remplir sa hauteur. Cette méthode est assez polyvalente dans mon expérience. Exemple de jsfiddle
    • ... il y a plus de cas spéciaux de ce genre.

738
2017-09-17 15:38



J'ai utilisé ce code très simple:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

De toute évidence, si vous utilisez un .class ou un #id, le résultat ne changera pas.


90
2018-05-03 11:11



Maintenant que le support de flexbox augmente, ce CSS appliqué à l'élément conteneur centre verticalement l'élément contenu:

.container {        
    display: flex;
    align-items: center;
}

Utilisez la version préfixée si vous devez également cibler Explorer 10 et les anciens navigateurs Android (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

75
2018-06-26 16:56



Cela a fonctionné pour moi:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

43
2018-05-11 10:24



Une technique d'un de mes amis:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO ici


20
2018-04-16 20:19



Tous doivent être alignés verticalement dans le div

Aligné Comment? Les sommets des images alignés avec le haut du texte?

Une des images doit être positionnée en absolu dans la div.

Absolument positionné par rapport à la DIV? Peut-être pourriez-vous esquisser ce que vous cherchez ...?

fd a décrit les étapes pour le positionnement absolu, ainsi que l'ajustement de l'affichage de la H1 élément tel que les images apparaîtront en ligne avec lui. Pour cela, je vais ajouter que vous pouvez aligner les images en utilisant le vertical-align style:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... cela mettrait l'en-tête et les images ensemble, avec les bords supérieurs alignés. D'autres options d'alignement existent; voir la documentation. Vous pourriez également trouver bénéfique de laisser tomber le DIV et de déplacer les images à l'intérieur du H1 élément - fournit une valeur sémantique au conteneur et supprime le besoin d'ajuster l'affichage de H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

16
2017-09-17 04:34



Utilisez cette formule, et cela fonctionnera toujours sans fissures:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>


14
2018-04-01 18:58