Comment aligner verticalement le texte dans une DIV flottée? Par exemple: j'ai un contenu dynamique avec une hauteur fixe. Si le contenu est petit ou grand, il doit automatiquement aligner verticalement.
merci
5 Réponses :
Avez-vous essayé vertical-align: milieu; ?
Cela ne fait pas ce que vous pensez sur des éléments non-tableaux ou flottés. Cela aligne ensemble les éléments en ligne.
Les cellules de table sont la solution la plus facile.
JavaScript est une alternative (mesurez la taille et la taille du texte de la DIV, puis ajustez le rembourrage, ou la ligne de ligne, ou autre). p>
EDIT: ou Awesome CSS: P>
CSS P>
<div id="container">
<div id="balance" class="valign"></div>
<div id="content" class="valign">
Blah blah blah blah<br/>
Blah blah blah blah<br/>
Blah blah blah blah<br/>
Blah blah blah blah<br/>
Blah blah blah blah
</div>
</div>
<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>
Chris COYIER a écrit un excellent tutoriel sur juste ceci: http: // CSS -tricks.com/vertiquement-center-multi-lined-text/
Je l'ai utilisé moi-même et ça marche parfaitement.
Je suis tombé sur ce problème auparavant.
Je citerai les experts pour que je ne fudesse pas ça:
"... L'objet interne est absolument positionné dans la moitié de la hauteur de la zone. Puis est déplacé de la moitié de sa hauteur."
Ceci peut être fait avec% au lieu de pixels exacts, au cas où les données sont générées à partir d'une base de données et la hauteur varie avec chaque page.
Source: ici < / p>
Démo: Lié sur la page ci-dessus
voici ma première réponse ...
Verticalement aligner par rapport à quoi?