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>Tel qu'il est rendu maintenant, le span est aligné sur le coin inférieur gauche de la division.
Voir mon article sur comprendre l'alignement vertical . Il existe de multiples techniques pour obtenir ce que vous voulez à la fin de la discussion.
(Résumé très court : soit la hauteur de ligne de l'enfant est égale à la hauteur du conteneur, soit le positionnement du conteneur est défini et l'enfant est positionné de manière absolue à l'emplacement suivant top:50% avec margin-top:-YYYpx YYY étant la moitié de la taille connue de l'enfant).
@Blender Heh, bien qu'il y ait une troisième option : display:table-cell; vertical-align:middle (ainsi qu'un display:table-row parent). :) Mais non, vous pouvez être sûrs que j'aurais ne préconisent jamais l'utilisation d'éléments de table HTML pour la mise en page .
Qu'est ce qui se passe si vous padding-top ??? un non fixe basé sur la hauteur du parent. je pense que votre solution fonctionne même si la hauteur est dynamique juste.
Réponse rapide pour la portée d'une seule ligne
Faire en sorte que l'enfant (dans ce cas un span) soit le même. line-height comme parent <div> de la hauteur
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>Vous devez ensuite ajouter les règles CSS
.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }Ou vous pouvez le cibler avec un sélecteur enfant
.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }Contexte de mon utilisation personnelle de cette
J'ai rencontré un problème similaire où j'avais besoin de centrer verticalement des éléments dans un menu mobile. J'ai fait en sorte que la div et les spans à l'intérieur aient la même hauteur de ligne. Notez que c'est pour un projet meteor et que je 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 les travées multiples dans un div)
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}Dans ce cas, si je n'avais qu'un seul span, j'aurais pu ajouter la règle CSS directement à ce span.
CSS (option pour un span spécifique)
.intlFlag { line-height: 42px; }Voici comment il s'est affiché pour moi
Comme dans une question similaire utiliser display: inline-block avec un élément de remplacement pour centrer verticalement la porté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 n'est appliqué qu'à éléments en ligne ou cellules de tableau Il faut donc l'utiliser avec display:inline-block o display:table-cell avec un display:table parent lors du centrage vertical des éléments du bloc.
Références :
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
