web-dev-qa-db-fra.com

Centrer verticalement deux éléments dans un div

J'essaye de centrer verticalement deux <p> éléments.

J'ai suivi le tutoriel à phrogz.net mais les éléments sont toujours placés au-dessus du div, en dessous du div, alignés en haut dans le div.

J'essaierais autre chose, mais la plupart des questions ici renvoient simplement à ce tutoriel.

Cet extrait concerne une bannière située en haut d'une page Web.

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}
<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p>
      <p>vertically centered</p>
    </div>
  </div>
  <div class="clear">
  </div>
</div>
htmlcsscentering
13
Romuloux

Ajoutez ce qui suit: display: table; à bannerRight

affichage: table-cellule; et vertical-align: milieu; à bannerrightinner

Je n'ai pas essayé cela, merci de me faire part de vos commentaires si cela ne fonctionne pas. ;)

EDIT: oublié de mentionner: retirer les propriétés 'float' et 'position'

0
Fábio

Comment centrer des éléments verticalement, horizontalement ou les deux

Voici deux façons de centrer les divs dans les divs.

Une façon utilise CSS Flexbox et l'autre utilise CSS table et positionnement propriétés.

Dans les deux cas, la hauteur des div centrés peut être variable, indéfinie, inconnue, peu importe. La hauteur des div centrés n'a pas d'importance.

enter image description here

Voici le HTML pour les deux:

<div id="container">   

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS Flexbox, méthode

#container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    height: 300px;
    border: 1px solid black;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

[~ # ~] démo [~ # ~]

Les deux éléments enfants (.box) sont alignés verticalement avec flex-direction: column. Pour un alignement horizontal, changez le flex-direction à row (ou supprimez simplement la règle comme flex-direction: row est le paramètre par défaut). Les éléments resteront centrés verticalement et horizontalement ( DEMO ).

Table CSS et méthode de positionnement

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

.box {
    width: 300px;
    padding: 5px;
    margin: 7px auto;   
    text-align: center;
}

[~ # ~] démo [~ # ~]

Quelle méthode utiliser ...

Si vous n'êtes pas sûr de la méthode à utiliser, je vous recommande flexbox pour ces raisons:

  1. code minimal; très efficace
  2. comme indiqué ci-dessus, le centrage est simple et facile ( voir un autre exemple )
  3. les colonnes de hauteur égale sont simples et faciles
  4. plusieurs options pour aligner les éléments flex
  5. c'est réactif
  6. contrairement aux flottants et aux tableaux, qui offrent une capacité de mise en page limitée car ils n'ont jamais été destinés à la création de mises en page, flexbox est une technique moderne (CSS3) avec un large éventail d'options.

Prise en charge du navigateur

Flexbox est pris en charge par tous les principaux navigateurs, sauf IE <1 . Certaines versions récentes de navigateurs, telles que Safari 8 et IE10, nécessitent préfixes du fournisseur =. Pour un moyen rapide d'ajouter des préfixes, utilisez Autoprefixer . Plus de détails dans cette réponse .

26
Michael_B