web-dev-qa-db-fra.com

Comment centrer verticalement un <span> dans une div?

Le code:

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

Comme il le rend maintenant, la plage est aligner le coin inférieur gauche de la div.

htmlcsscenter
198
Babiker

Voir mon article sur comprendre l'alignement vertical . Il existe plusieurs techniques pour accomplir ce que vous voulez à la fin de la discussion.

(Résumé super-court: définissez la hauteur de ligne de l'enfant sur la hauteur du conteneur, ou définissez le positionnement sur le conteneur et positionnez absolument l'enfant à top:50% avec margin-top:-YYYpx, YYY étant la moitié de la taille connue de l'enfant.)

182
Phrogz

Chez votre parent, ajoutez

display:table;

et à votre élément enfant ajouter

 display:table-cell;
 vertical-align:middle;
143
Otto Kanellis

comme dans une question similaire , utilisez display: inline-block avec un élément fictif pour centrer verticalement la plage située à l'intérieur d'un élément de bloc:

html, body, #container, #placeholder { height: 100%; }

#content, #placeholder { display:inline-block; vertical-align: middle; }
<!doctype html>
<html lang="en">
  <head>
  </head>

  <body>
    <div id="container">
      <span id="content">
        Content
      </span>
      <span id="placeholder"></span>
    </div>
  </body>
</html>

L'alignement vertical est uniquement appliqué à éléments insérés ou cellules de tablea , utilisez-le ainsi avec display:inline-block ou display:table-cell avec un parent display:table_ pour centrer verticalement les éléments de bloc.

Références:

Centrage horizontal et vertical CSS

36
Paul Sweatte

Réponse rapide pour une ligne unique

Faites en sorte que l'enfant (dans ce cas une étendue) ait la même hauteur que line-height comme le parent <div>

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>

Vous devriez alors ajouter les règles CSS

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }


Ou vous pouvez le cibler avec un sélecteur d'enfants

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

Fond sur ma propre utilisation de ceci

J'ai rencontré ce problème similaire où je devais centrer verticalement les éléments dans un menu mobile. J'ai fait le div et s'étend à l'intérieur de la même hauteur de ligne. Notez que ceci s’applique à un projet météore et n’utilise donc pas de CSS en ligne;)

HTML

<div class="international">        
  <span class="intlFlag">
    {{flag}}        
  </span>

  <span class="intlCurrent">
    {{country}}
  </span>

  <span class="intlButton">
    <i class="fa fa-globe"></i>
  </span> 
</div>

CSS (option pour plusieurs plages dans un div)

.international {
  height: 42px;
}

.international > span {
  line-height: 42px;
}

Dans ce cas, si je n'avais qu'une étendue, j'aurais pu ajouter la règle CSS directement à cette étendue.

CSS (option pour une plage spécifique)

.intlFlag { line-height: 42px; }

Voici comment cela s'est affiché pour moi

enter image description here

33
JGallardo

Pour la div parent ajouter une hauteur dire 50px. Dans l'envergure de l'enfant, ajoutez la hauteur de ligne: 50px; Maintenant, le texte dans l'étendue sera centré verticalement. Cela a fonctionné pour moi.

0
DTS