Comment centrer verticalement un <span> à l'intérieur d'un div?

156

Le code:Comment centrer verticalement un <span> à l'intérieur d'un div?

<div style=" 
    border:solid 1px gray; 
    cursor:text; 
    width:400px; 
    padding:0px;" 
id="theMainDiv"> 
    <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 rend maintenant, la durée est d'aligner le coin inférieur gauche de la div.

Source

2010-12-05 Babiker

159

Voir mon article sur understanding vertical alignment. Il existe plusieurs techniques pour accomplir ce que vous voulez à la fin de la discussion.

(Super-court résumé: ou définir la ligne de taille de l'enfant égale à la hauteur du conteneur, ou un ensemble de positionnement sur le récipient et la position absolue de l'enfant à top:50% avec margin-top:-YYYpx, YYY étant la moitié de la hauteur connue . de l'enfant)

Source

2010-12-05 04:07:21 Phrogz

+33

+1 pour * pas * à l'aide d'une table. – Blender

@Blender Heh, bien que référençant une troisième option: 'display: table-cell; vertical-align: middle' (avec un parent 'display: table-row'). :) Mais non, vous pouvez être sûr que je ne [recommanderais jamais l'utilisation d'éléments de tableau HTML pour la mise en page] (http://phrogz.net/CSS/WhyTablesAreBadForLayout.html). – Phrogz

que se passe-t-il si vous remboursez? un non fixe basé sur la hauteur du parent. Je pense que votre solution fonctionne même si la hauteur est dynamique. – kobe

As in a similar question, utiliser display: inline-block avec un élément d'espace réservé pour centrer verticalement à l'intérieur de la durée 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>

alignement vertical est appliqué uniquement à inline elements or table cells, afin de l'utiliser avec display:inline-block ou display:table-cell avec un parent display:table lorsque les éléments de bloc de centrage vertical.

Références:

CSS Horizontal and Vertical Centering

Source

2012-06-22 18:19:23

Cette solution fonctionne pour moi car je ne connais pas la taille du parent et c'est aussi dynamique. line-height n'est pas une option lorsque vous ne connaissez pas la hauteur du parent ou sa dynamique. +1 –

La solution fonctionne tant que #content n'est pas encapsulé –

104

à ajouter votre DIV parent

display:table;

et à ajouter votre élément enfant

display:table-cell; 
vertical-align:middle;

Source

2012-12-12 09:08:34

Que faire si le parent est affiché: inline-block ?? Je dois ajouter un balisage supplémentaire !!! –

@bhavya_w avez-vous essayé la hauteur de ligne? –

Beaucoup de gens mettent en garde contre l'utilisation de 'table' ... pourquoi? – rattray

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

Source

2013-09-09 22:18:45 DTS

réponse rapide pour la durée d'une seule ligne

Faire l'enfant (dans ce cas, une période), le même line-height que la hauteur d » un parent <div>

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

Vous devez 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'enfant

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

Informations générales sur ma propre utilisation de ce

Je suis tombé sur cette question similaire où je devais articles Centrer verticalement dans un menu mobile. J'ai fait la div et les travées à l'intérieur de la même ligne.Notez que ceci est pour un projet de météores et donc de ne pas utiliser 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 travées dans un div)

.international { 
    height: 42px; 
} 

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

En Dans ce cas, si j'avais juste une durée, j'aurais pu ajouter la règle CSS directement à cette durée.

CSS (option pour une durée spécifique)

.intlFlag { line-height: 42px; }

Voici comment il apparaît pour moi

enter image description here

Source

2014-01-31 00:17:16 JGallardo

cela ne fonctionnera pas si le texte est multiligne – brabertaser19

Comment centrer verticalement un <span> à l'intérieur d'un div?

Répondre

Questions connexes