Comment aligner verticalement 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.

L'une des images doit être absolutepositionnée dans le 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>

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

Comprendre vertical-align, ou "Comment (ne pas) centrer verticalement du 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 éviter la pourriture des maillons)}} :

• Les éléments en ligne (et uniquement les éléments en ligne) peuvent être alignés verticalement dans leur contexte via vertical-align: middle. Cependant, le «contexte» n'est pas la hauteur entière du conteneur parent, c'est la hauteur de la ligne de texte dans laquelle ils se trouvent. Exemple 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 une hauteur fixe , vous pouvez faire connaître sa position absoluteet préciser son height, margin-topet la topposition. exemple jsfiddle
  • Si l'élément centré se compose d'une seule ligne et que sa hauteur parente est fixe, vous pouvez simplement définir le conteneur pour line-heightqu'il remplisse sa hauteur. Cette méthode est assez polyvalente dans mon expérience. exemple jsfiddle
  • … Il y a plus de cas particuliers.

Maintenant que la prise en charge de la flexbox augmente, ce CSS appliqué à l'élément contenant centrerait 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;
}

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, que vous utilisiez un .classou un #id, le résultat ne changera pas.

Cela a fonctionné pour moi:

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

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

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;}

DÉMO ici

Pour positionner les éléments de bloc au centre (fonctionne dans IE9 et supérieur), a besoin d'un wrapper div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Tous doivent être alignés verticalement dans le div

Aligné comment ? Haut des images alignées avec le haut du texte?

L'une des images doit être positionnée en absolu dans le div.

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

fd a décrit les étapes du positionnement absolu, ainsi que le réglage de l'affichage de l' H1élément de sorte que les images apparaissent en ligne avec lui. À cela, j'ajouterai que vous pouvez aligner les images en utilisant le vertical-alignstyle:

#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 pouvez également trouver utile de supprimer le DIV et de déplacer les images à l'intérieur de l' H1élément - cela fournit une valeur sémantique au conteneur et supprime la nécessité d'ajuster l'affichage du H1:

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

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>

Presque toutes les méthodes doivent spécifier la hauteur, mais souvent nous n'avons pas de hauteur.
Voici donc une astuce CSS3 3 lignes qui ne nécessite pas de connaître la hauteur.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Il est pris en charge même dans IE9.

avec ses préfixes fournisseurs:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

De deux manières, vous pouvez aligner les éléments verticalement et horizontalement

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3.X

pour l'alignement vertical: d-flex align-items-center

pour l'alignement horizontal: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

<div class="container">
  <div class="child">I am in Center</div>
</div>

Mon astuce consiste à mettre à l'intérieur de la div une table avec 1 ligne et 1 colonne, définir 100% de largeur et hauteur, et la propriété vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Violon: http://jsfiddle.net/joan16v/sbqjnn9q/

# 3 façons de diviser l'enfant central dans une div parent

• Méthode de positionnement absolu
• Méthode Flexbox

• Transformer / Traduire la méthode

  

  Démo

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

En utilisant CSS au centre vertical, vous pouvez laisser les conteneurs externes agir comme un tableau et le contenu comme une cellule de tableau. Dans ce format, vos objets resteront centrés. :)

J'ai imbriqué plusieurs objets dans JSFiddle pour un exemple, mais l'idée centrale est comme ceci:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

L'exemple de plusieurs objets:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Résultat

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Par défaut, h1 est un élément de bloc et s'affichera sur la ligne après la première img, et fera apparaître la deuxième img sur la ligne suivant le bloc.

Pour empêcher cela de se produire, vous pouvez définir le h1 pour avoir un comportement de flux en ligne:

#header > h1 { display: inline; }

En ce qui concerne le positionnement absolu de l'img à l'intérieur du div , vous devez définir le div contenant pour avoir une "taille connue" avant que cela fonctionne correctement. D'après mon expérience, vous devez également modifier l'attribut position loin de la valeur par défaut - position: relative fonctionne pour moi:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Si vous pouvez le faire fonctionner, vous voudrez peut-être essayer de supprimer progressivement les attributs de hauteur, largeur et position de div.header pour obtenir les attributs minimaux requis pour obtenir l'effet souhaité.

MISE À JOUR:

Voici un exemple complet qui fonctionne sur Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Nous pouvons utiliser un calcul de fonction CSS pour calculer la taille de l'élément, puis positionner l'élément enfant en conséquence.

Exemple HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Et CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Démo créée ici: https://jsfiddle.net/xnjq1t22/

Cette solution fonctionne bien avec responsive div heightet widthaussi.

Remarque: La fonction calc n'est pas testée pour la compatibilité avec les anciens navigateurs.

Aujourd'hui, j'ai trouvé une nouvelle solution pour aligner verticalement plusieurs lignes de texte dans un div en utilisant CSS3 (et j'utilise également le système de grille bootstrap v3 pour embellir l'interface utilisateur), qui est comme ci-dessous:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Selon ma compréhension, le parent immédiat du texte contenant l'élément doit avoir une certaine hauteur. J'espère que cela vous aidera aussi. Merci!

Ma nouvelle façon préférée de le faire est avec une grille CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Utilisez simplement un tableau à une cellule à l'intérieur du div! Réglez simplement la hauteur de la cellule et du tableau à 100% et vous pouvez utiliser l'alignement vertical.

Une table à une cellule à l'intérieur du div gère l'alignement vertical et est rétrocompatible avec l'âge de pierre!

J'utilise la solution suivante (sans positionnement et sans hauteur de ligne) depuis plus d'un an, elle fonctionne également avec IE 7 et 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Ceci est ma solution personnelle pour un élément i à l'intérieur d'un div

Exemple JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Pour moi, cela a fonctionné de cette façon:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

L'élément "a" converti en bouton, à l'aide des classes Bootstrap, et il est maintenant centré verticalement à l'intérieur d'un "div" externe.

en utilisant display flex, vous devez d'abord envelopper le conteneur de l'élément que vous souhaitez aligner.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

puis appliquez le css suivant à wrapper div ou outdiv dans mon exemple

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}

Juste ça:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Une table à une cellule à l'intérieur du div gère l'alignement vertical et est rétrocompatible avec l'âge de pierre!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Voici juste une autre approche (réactive):

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Je suis un gars .NET qui vient de se lancer dans la programmation Web. Je n'ai pas utilisé CSS (enfin, un peu). J'ai utilisé un peu de JavaScript pour effectuer un centrage vertical avec la fonction .css de jQuery.

Je poste juste tout de mon test. Ce n'est probablement pas trop élégant, mais cela fonctionne jusqu'à présent.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

ou CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Couverture du navigateur