Alignement Vertical des éléments d'un div

j'ai une div avec deux images et un h1 . Tous doivent être alignés verticalement au sein de la div, côte à côte.

une des images doit être absolute positionnée dans le div.

de quoi a besoin le CSS pour fonctionner sur tous les navigateurs courants?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
576
demandé sur Web_Designer 2008-09-17 06:53:36
la source

25 ответов

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

Compréhension vertical-align , ou "Comment (ne Pas) à la Verticale du Centre de Contenu" par Gavin Kistner.

"comment centrer dans CSS " est un grand outil Web qui aide à trouver les attributs de centrage CSS nécessaires pour différents situation.


en un mot (et pour prévenir 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 l'ensemble du conteneur parent de la hauteur, c'est la hauteur de la ligne de texte. jsfiddle exemple
  • 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 intérieur peut avoir une hauteur fixe , vous pouvez faire sa position absolute et spécifier sa position height , margin-top et top . exemple de jsfiddle
    • si l'élément centré est constitué d'un ligne et sa hauteur mère est fixe vous pouvez simplement régler le line-height du conteneur pour remplir sa hauteur. Cette méthode est assez polyvalente d'après mon expérience. exemple de jsfiddle
    • ... il y a plus de cas spéciaux de ce genre.
755
répondu Konrad Rudolph 2017-08-07 12:50:48
la source

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.

92
répondu user2346571 2016-10-31 21:17:23
la source

maintenant que le support 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 avez également besoin de cibler Explorer 10, et les anciens (<4.4) navigateurs Android:

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

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

    align-items: center;
}
79
répondu E. Serrano 2016-02-28 20:47:08
la source

Il a travaillé pour moi:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
43
répondu Romain 2017-01-14 19:29:29
la source

une technique d'un ami à moi:

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

20
répondu abernier 2017-01-14 19:31:01
la source

tous ces éléments doivent être alignés verticalement au sein de la division 151980920"

aligné comment ? Tops des images aligné avec le haut du texte?

une des images doit être absolument positionnée au sein de la div.

absolument positionné par rapport à la DIV? 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 l'élément H1 de sorte que les images apparaissent en ligne avec elle. À 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; }

...ce serait mettre 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 laisser tomber le DIV et déplacer les images à l'intérieur de l'élément H1 - 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>
16
répondu Shog9 2017-05-23 15:26:27
la source

pour positionner les éléments de bloc au centre (fonctionne dans IE9 et au-dessus), a besoin d'une enveloppe div :

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
14
répondu Blacksonic 2016-01-28 23:48:50
la source

utilisez cette formule, et il 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
répondu Anita Mandal 2017-01-14 19:30:26
la source

presque toutes les méthodes doivent spécifier la hauteur, mais souvent nous n'avons pas de hauteurs.

Voici donc un truc CSS3 3 line qui ne nécessite pas de connaître la hauteur.

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

il est supporté même dans IE9.

avec ses préfixes de vendeur:

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

9
répondu Shadowbob 2014-01-18 14:13:26
la source

mon truc est de mettre à l'intérieur de la div une table avec 1 rangée et 1 colonne, mettre 100% de la largeur et la 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>

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

9
répondu joan16v 2014-10-14 19:26:29
la source
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }
7
répondu Sameera Prasad Jayasinghe 2018-08-01 09:38:35
la source

par défaut h1 est un élément de bloc qui sera affiché sur la ligne après le premier img, et fera apparaître le second img sur la ligne qui suit le bloc.

pour empêcher que cela se produise, vous pouvez régler le h1 pour avoir un comportement d'écoulement en ligne:

#header > h1 { display: inline; }

quant au positionnement absolu de l'img à l'intérieur de la div , vous devez définir la div contenant pour avoir une" taille connue " avant que cela ne fonctionne correctement. Dans mon expérience, vous devez également changer l'attribut position loin de la position par défaut-position: relative works for me:

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

Si vous pouvez obtenir que cela fonctionne, vous pouvez essayer de supprimer progressivement la hauteur, la largeur, la position des attributs de div.l'en-tête pour obtenir le minimum d'attributs requis pour obtenir l'effet que vous voulez.

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>
3
répondu Mike Tunnicliffe 2008-09-18 21:28:33
la source

en utilisant CSS à centre vertical, vous pouvez laisser les conteneurs extérieurs agir comme une table, et le contenu comme une cellule de table. Dans ce format, vos objets resteront centrés. :)

a imbriqué plusieurs objets dans JSFiddle pour un 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;
 }

exemple d'objets multiples:

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

Result

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

3
répondu Henk-Martijn 2016-01-07 00:57:43
la source

nous pouvons utiliser un calcul de la fonction CSS pour calculer la taille de l'élément et ensuite 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 height et width ainsi.

Note: la compatibilité de la fonction calc avec les anciens navigateurs n'est pas vérifiée.

3
répondu Dashrath 2017-01-14 19:40:32
la source

il suffit d'utiliser une table à une cellule à l'intérieur de la div! Il suffit de régler la hauteur de la cellule et de la table et à 100% et vous pouvez utiliser le vertical-align.

une table unicellulaire à l'intérieur de la div gère l'alignement vertical et est compatible avec l'arrière à l'Âge de Pierre!

1
répondu Joel Moses 2017-01-14 19:33:05
la source

comme aujourd'hui, j'ai trouvé une nouvelle solution pour aligner verticalement plusieurs lignes de texte dans une div en utilisant CSS3 (et j'utilise aussi bootstrap v3 grid system 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%;
}

d'après ce que j'ai compris, le parent immédiat d'un texte contenant un élément doit avoir une certaine hauteur. J'espère que ça va vous aider trop. Merci!

1
répondu Shivam 2017-08-02 14:44:17
la source

j'utilise la solution suivante (sans positionnement et sans hauteur de ligne) depuis plus d'un an, elle fonctionne aussi 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>
0
répondu Arsh 2014-07-28 00:00:50
la source

C'est ma solution personnelle pour un je de l'élément à l'intérieur d'un div

JSFiddle Exemple

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;
}
0
répondu danigonlinea 2014-09-16 15:45:16
la source

pour moi, ça a marché comme ça:

<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 un bouton, en utilisant les classes Bootstrap, et il est maintenant centré verticalement à l'intérieur d'une" div " externe.

0
répondu BernieSF 2017-01-14 19:36:44
la source

Mise À Jour - Bootstrap-4

centrer les éléments de l'enfant verticalement et horizontalement

pour vertical: d-flex align-items-center

pour horizontal: d-flex justify-content-center

.width-height {
    height: 180px;width:100%"
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
rel="stylesheet"/>

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

pour en savoir plus, consultez la documentation getbootstrap.com/docs/4.0/utilities/flex / , il existe plusieurs méthodes pour centrer les éléments.

-2
répondu WasiF 2018-07-10 14:13:51
la source

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

une table unicellulaire à l'intérieur de la div gère l'alignement vertical et est compatible avec l'arrière de retour à L'Âge de Pierre!

-3
répondu Joel Moses 2017-01-14 19:31:59
la source
<!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>
-3
répondu pr0gg3r 2017-01-14 19:34:42
la source

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 /

-4
répondu Peter Mortensen 2017-01-14 19:33:55
la source

je suis un gars de .NET qui vient d'entrer dans la programmation web. Je n'ai pas utilisé CSS (enfin, un peu). J'ai utilisé un peu de JavaScript pour accomplir le centrage vertical avec jQuery .fonction css.

je viens de poster tout de mon test. Ce n'est probablement pas trop élégant, mais ça marche jusqu'ici.

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>
-4
répondu tronious 2017-01-14 19:38:24
la source
<div id="header" style="display: table-cell; vertical-align:middle;">

...

ou CSS

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

Couverture Par Navigateur

-9
répondu dimarzionist 2012-05-05 00:53:44
la source

Autres questions sur html css vertical-alignment