Comment aligner verticalement des éléments dans un div?

Question

J'ai une div avec deux images et un h1. Tous doivent être alignés verticalement dans le div, les uns à côté des autres.

Une des images doit être absolute positionnée dans la division

.

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>

Answer 1

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

Comprendre vertical-align: middle, ou & "Comment (ne pas) centrer verticalement Contenu & Quot; de Gavin Kistner.

& # 8220; Comment se centrer dans CSS & # 8221; 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 du lien)}} :

Les
• éléments en ligne (et uniquement en ligne) peuvent être alignés verticalement dans leur contexte via absolute. Cependant, le & # 8220; contexte & # 8221; isn & # 8217; t la hauteur totale du conteneur parent, il & # 8217; correspond à la hauteur de la ligne de texte dans laquelle ils & # 8217; se trouvent. exemple avec jsfiddle
• Pour les éléments de bloc, l'alignement vertical est plus difficile et dépend fortement de la situation:
  • Si l'élément interne peut avoir une hauteur fixe , vous pouvez définir sa position height et spécifier ses positions margin-top, top et line-height. exemple de jsfiddle
  • Si l'élément centré consiste en une seule ligne et que sa hauteur parente est fixée , vous pouvez simplement définir le conteneur & # 8217 ; s <=> pour remplir sa hauteur. Cette méthode est assez polyvalente dans mon expérience. exemple jsfiddle
  • & # 8230; il y a plus de ces cas spéciaux.

Answer 2

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

Answer 3

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

Évidemment, que vous utilisiez un .class ou un #id, le résultat ne changera pas.

Answer 4

Cela a fonctionné pour moi:

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

Answer 5

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

Answer 6

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

Answer 7

  

Tous doivent être alignés verticalement dans la division

Aligné comment ? Le dessus des images est-il aligné sur le haut du texte?

  

Une des images doit être positionnée de manière absolue dans la division.

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

fd a décrit les étapes du positionnement absolu, ainsi que d'ajuster l'affichage de l'élément H1 de sorte que les images apparaîtront alignées avec lui. J'ajoute à cela 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 pouvez également trouver avantageux de supprimer la DIV et de déplacer les images à l'intérieur de l'élément <=> - cela donne une valeur sémantique au conteneur et vous évite de devoir ajuster l'affichage de l'élément <=>:

.

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

Answer 8

Pour positionner les éléments de bloc au centre (fonctionne dans IE9 et les versions ultérieures), il faut un wrapper div:

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

Answer 9

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>

Answer 10

Presque toutes les méthodes doivent spécifier la hauteur, mais souvent nous n’avons aucune hauteur.
Voici donc une astuce CSS3 de 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 de fournisseur:

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

Source: http://zerosixthree.se / vertical-align-rien-avec-seulement-3-lignes-de-css /

Answer 11

Mon astuce consiste à insérer dans le div un tableau avec 1 ligne et 1 colonne, de définir 100% de la largeur et de la hauteur, ainsi que 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/

Answer 12

Par défaut, h1 est un élément de bloc et restituera la ligne après la première img et fera en sorte que la deuxième img apparaisse sur la ligne suivant le bloc.

Pour que cela ne se produise pas, définissez le comportement du flux en ligne sur h1:

#header > h1 { display: inline; }

En ce qui concerne le positionnement absolu de l'img dans le div , vous devez définir le div qui le contient de manière à avoir une & "taille connue &"; avant que cela fonctionne correctement. D'après mon expérience, vous devez également modifier l'attribut position de la position par défaut - position: le relatif fonctionne pour moi:

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

Si vous voulez que cela fonctionne, essayez d’enlever progressivement les attributs height, width, position de div.header pour obtenir les attributs minimaux requis afin d’obtenir l’effet souhaité.

UPDATE:

Voici un exemple complet fonctionnant sous 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>

Answer 13

En utilisant CSS pour centrer verticalement, vous pouvez laisser les conteneurs extérieurs 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, par exemple, mais l'idée de base est la suivante:

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/

Answer 14

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

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

Cette solution fonctionne bien avec responsive div height et width également.

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

Answer 15

Comme aujourd'hui, j'ai trouvé une nouvelle solution permettant d'aligner verticalement plusieurs lignes de texte dans une div à l'aide de CSS3 (et j'utilise également le système de grille Bootstrap v3 pour embellir l'interface utilisateur), comme suit:

.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 d'un élément contenant du texte doit avoir une certaine hauteur. J'espère que cela vous aidera aussi. Merci!

Answer 16

Il y a deux façons d'aligner des éléments verticalement et horizontalement

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;
    justify-content: 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>

Answer 17

Utilisez simplement un tableau à une cellule à l’intérieur du div! Il suffit de définir la hauteur de la cellule et de la table ainsi que 100% et vous pouvez utiliser l'alignement vertical.

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

Answer 18

J'utilise la solution suivante (sans positionnement ni 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>

Answer 19

C’est ma solution personnelle pour un élément i dans 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;
}

Answer 20

Pour moi, cela a fonctionné comme suit:

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

Le " un " converti en bouton en élément Bootstrap, il est maintenant centré verticalement à l'intérieur d'un & "; div &"; extérieur.!.

Answer 21

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


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

Answer 22

Seulement ceci:

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

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

Answer 23

<!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>

Answer 24

Voici 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/

Answer 25

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

Je ne fais que publier tout de mon test. Ce n'est probablement pas très élégant, mais ça marche 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>

Answer 26

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

...

ou CSS

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

Couverture du navigateur