Comment aligner un texte vertical?

StackOverflow https://stackoverflow.com/questions/1101827

  •  12-09-2019
  •  | 
  •  

Question

Comment aligner verticalement le texte dans un div flotta? Par exemple: J'ai un contenu dynamique à hauteur fixe. si le contenu est petit ou grand, il doit automatiquement aligner verticalement.

Merci

Était-ce utile?

La solution

Les cellules du tableau sont la meilleure solution.

Javascript est une alternative (mesurer la taille de la taille et le texte de la div, puis ajustez le rembourrage, ou lineheight, ou autre).

modifier: Ou ce css impressionnant:

CSS 

div#container {
    border: solid 1px;
    height: 300px;
}

div#content {
    border: solid 1px;
}

div#balance {
    border: solid 1px;
    /* gotta be 100% */
    height: 100%;
}

div.valign {
    /* firefox 2 */
    display: -moz-inline-box;
    /* everybody else */
    display: inline-block;

    vertical-align: middle;
}

/* IE 6 and 7 hack */
html* div.valign {
    display: inline;
}

HTML 

<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>

Been sens à faire un billet de blog à ce sujet pendant un certain temps, je pense qu'il est temps.

Autres conseils

Je sais que cela va ruiner ma réputation, mais ... utilise une cellule de tableau. Toute solution CSS cross-navigateur pour l'alignement vertical sera deux fois plus difficile à maintenir, être optimiste. 

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>

Chris Coyier a écrit un excellent tutoriel sur ceci: http: // css -tricks.com/vertically-center-multi-lined-text/

Je l'ai utilisé moi-même, et cela fonctionne parfaitement.

Je suis tombé sur ce problème avant. Je vais citer les experts, donc je ne fudge cette place: « ... objet interne est placé de façon absolue la moitié de la hauteur de la zone. Ensuite, est déplacé par la moitié de sa hauteur. »

Cela peut être fait avec% au lieu de pixels précis, dans le 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:

Démo: lien sur la page ci-dessus

va ici ma première réponse ...

Avez-vous essayé vertical-align: milieu; ?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top