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


792

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>

14
J'ai fait une liste de toutes les façons d'aligner verticalement .. Je vais le laisser ici: jsfiddle.net/techsin/FAwku/1
Muhammad Umer

2
Voici deux méthodes simples pour centrer un élément dans un div, verticalement, horizontalement ou les deux (CSS pur): stackoverflow.com/a/31977476/3597276
Michael Benjamin

1
margin-top: auto et margin-bottom: auto (Fonctionne pour beaucoup de cas).
CrippledTable

Réponses:


932

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.

142
Le problème avec les solutions "valides" (donc pas les vertical-align: middle) est que vous devez spécifier une hauteur fixe. Pas très possible pour le Responsive Web Design .
Emilie

1
J'avais cette structure: <div height = "## px"> Mon texte </ div> J'ai travaillé pour moi définir la propriété lineHeight en utilisant la même valeur que celle utilisée dans la propriété div height: '## px' (## parce que cette valeur est dynamique dans mon cas) merci
patricK

8
Cela fonctionne également avec inline-blocktable-cell éléments et . Si vous rencontrez des problèmes avec cela, essayez d'ajuster line-heightl'élément conteneur (c'est-à-dire le contexte) car il est utilisé dans les vertical-aligncalculs de zone de ligne.
Alex W

1
css-tricks.com/centering-css-complete-guide <- quelques bonnes options présentées ici, je me suis retrouvé à recourir à la solution table / table-cell la plupart du temps cependant
shaunhusain

1
Cet outil (howtocenterincsss.com) est assez génial car il a fonctionné dès la sortie de la boîte dans mon CSS existant! C'est super rare. Rappelez-vous les vieux jours où vous deviez copier des feuilles de style entières à partir d'un exemple, parfois même l'exemple HTML et ensuite supprimer et renommer les éléments les uns après les autres jusqu'à ce que ce soit ce dont j'avais besoin. Pas le cas pour ce site!
konstantin

190

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

Une belle solution, merci. Pouvez-vous suggérer comment faire en sorte que flexbox affiche une barre de défilement horizontale, au cas où l'élément intérieur est plus grand que le conteneur? (J'essaie de rendre l'élément intérieur zoomable / défilable dans le conteneur, comme la toile dans PowerPoint)? Est-ce possible du tout?
Boris Burkov

1
@YazidErman cette solution dépend de FlexBox donc pas seulement IE 10 et au- dessus de support ou tout autre navigateur moderne caniuse.com/#search=flexbox Flexbox est grand où il est pris en charge mais ce n'est pas partout. Le tableau d'affichage et la cellule de tableau sont probablement la meilleure solution, le conteneur doit simplement être un tableau, l'élément centré est enveloppé d'un élément avec une cellule de tableau d'affichage, puis peut simplement être centré comme le soulignent d'autres réponses ici.
shaunhusain

1
Pourquoi était-ce si difficile pour moi de trouver>. <Merci pour la réponse! Peut confirmer que cela fonctionne pour moi dans un scénario où une autre réponse n'a pas fonctionné.
Michael McKenna

1
Guide des astuces CSS utiles sur flexbox puis regardez la align-itemssection
icc97

1
En 2020, nous pouvons utiliser flexbox caniuse.com/#feat=flexbox
tonygatta

116

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.


3
Voici un exemple complet des neuf possibilités d'alignement (haut-milieu-bas et gauche-centre-droite): jsfiddle.net/webMac/0swk9hk5
webMac

En 2020, nous pouvons utiliser flexbox caniuse.com/#feat=flexbox
tonygatta

fonctionne parfaitement pour moi
huynq0911

49

Cela a fonctionné pour moi:

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

9
Ce n'est donc plus un élément "block"?
Pacerier

7
Ensuite, si vous souhaitez vous aligner horizontalement avec margin : 0 auto, cela ne fonctionnera pas à cause dedisplay: table-cell
Ortomala Lokni

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

7
Je pense que cette solution est la plus rapide et la plus facile à comprendre. C'est peut-être parce que je n'ai pas été assez patient pour chercher la réponse choisie. Flexbox toutes les choses!
modulitos

1
L'ajout de justify-content: centerfixe mon manque de centrage horizontal
Samuel Slade

22

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


1
cette technique est décrite plus en détail ici: css-tricks.com/centering-in-the-unknown
nerdess

18

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

2
Cette méthode peut rendre les éléments flous car l'élément est placé sur un «demi-pixel». Une solution pour cela consiste à définir la perspective de l'élément. transform: perspective (1px) translateY (-50%);
Simon

16

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>

15

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>


2
Je n'ai jamais vu en css ce genre de sélecteur "#outer [id]". Qu'est-ce que ça devrait faire? Et si j'aurais une classe au lieu d'un identifiant?
Alexa Adrian

12

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/


mais cela semble fonctionner uniquement lorsque la hauteur du parent de l'élément est fixe. la propriété 'top' avec pourcentage ne fonctionne que dans le conteneur à hauteur fixe, n'est-ce pas?
ucdream

Oui, cela ne fonctionne que pour certains cas, j'ai eu des problèmes plus tard avec ces méthodes ... Le problème est d'avoir le plus de possibilités possible et dès que vous en avez besoin, vous les testez toutes jusqu'à ce que vous obteniez la bonne, car toutes les méthodes a obtenu des choses qui ne fonctionneront pas dans un cas spécifique ...
Shadoweb

12

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

  1. Bootstrap 4
  2. CSS3

entrez la description de l'image ici

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>


1
Les deux façons sont fondamentalement les mêmes puisque Bootstrap utilise les mêmes attributs flex dans ses classes.
Mx.

Bootstrap n'est pas magique. Il est soumis aux mêmes limitations CSS qui affectent tout le monde. Il cache simplement ce qu'il fait de la moyenne. utilisateur.
JasonGenX

10

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/


7
Cela semble être le meilleur moyen d'éviter de se gratter la tête. Je ne comprends toujours pas pourquoi CSS n'a pas de norme d'alignement vertical.
Kokodoko

5

# 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

    entrez la description de l'image ici

    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>


4

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

Résultat

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


3

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>

4
Je dois noter que le fait d'avoir le bon DOCTYPE peut parfois faire de grandes différences dans le rendu de CSS, en particulier sur Internet Explorer. Je vous recommande de choisir un DOCTYPE connu pour s'aligner sur un mode standard strict afin que vous puissiez vous attendre à un comportement plus cohérent entre les navigateurs.
Mike Tunnicliffe le

2
Je ne m'attendrais pas à une cohérence entre les navigateurs .. la seule façon d'être sûr est de tester: /
Cocowalla

3

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.


3

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!


Solution très propre. Celui-ci a bien fonctionné pour moi.
Akalonda

2

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>


1

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!


0

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>

0

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

0

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.


0

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

Seules les réponses codées sont déconseillées. Veuillez ajouter quelques explications sur la façon dont cela résout le problème, ou en quoi cela diffère des réponses existantes. De l'avis
Nick

-3

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!


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

-4

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

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>

7
Vous enseignez aux nouveaux développeurs Web comment faire les choses mal, HTML est pour définir le contenu, CSS est pour styliser le HTML, et JavaScript est pour manipuler les deux au moment de l'exécution en fonction des conditions. Mélanger ceux-ci peut rapidement conduire à des spaghettis et à un code intensif en performances
OverCoder

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

...

ou CSS

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

Couverture du navigateur


1
La propriété d'alignement vertical ne s'applique pas puisque le div est affiché: bloc par défaut et rien ne semble avoir été fait pour le changer.
Quentin

3
Apparemment, l'affichage a été mis à jour table-cell, ce qui vertical-align: middle;fonctionne. Encore mieux, cela fonctionne sans avoir besoin d'un div wrapper / buffer imbriqué, et il fonctionne à la fois pour le texte et les images (ou les deux), et vous n'avez pas besoin de modifier les propriétés de position.
MSpreij

3
Celui-ci fonctionne. Il change l'affichage en tableau-cellule qui prend la propriété d'alignement vertical. Aucune idée pourquoi les gens votent contre.
texasbruce

1
oui, pour autant que je sache, c'est la façon la moins intrusive de centrer quoi que ce soit verticalement dans une div. +1
Pma

Ok, j'ai peut-être été trop rapide avec mes conclusions ... Ajout de l'affichage: la cellule du tableau rompt la marge div et la bordure supplémentaire est affichée à l'extérieur div, la bordure combinée avec le rayon de la bordure affiche les coins arrondis à l'intérieur de la division à l'extérieur
Pma
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.