Como alinhar vertical, um texto?

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

  •  12-09-2019
  •  | 
  •  

Pergunta

Como alinhar verticalmente o texto em uma div flutuou? Por exemplo: Eu tenho um conteúdo dinâmico com altura fixa. se o conteúdo é pequeno ou grande que tem que automaticamente alinhar verticalmente.

Graças

Foi útil?

Solução

As células da tabela são a solução mais fácil.

Javascript é uma alternativa (medir o tamanho e texto do tamanho do div, em seguida, ajuste o preenchimento, ou LineHeight, ou qualquer outro).

edit: Ou este css incrível:

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>

Foram significado para fazer um post sobre isso por um tempo, eu acho que é hora.

Outras dicas

Eu sei que isto vai arruinar a minha reputação, mas ... usar uma célula de tabela. Qualquer solução CSS cross-browser para alinhamento vertical será duas vezes mais difícil de manter, sendo otimista. 

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

Chris Coyier escreveu um excelente tutorial sobre apenas isso: http: // css -tricks.com/vertically-center-multi-lined-text/

Eu usei-me, e ele funciona perfeitamente.

Eu me deparei com esse problema antes. Vou citar os especialistas para que eu não falsificar isso: "... objeto interno é posicionado de forma absoluta na metade da altura área. Em seguida, é movido por meio da sua altura."

Isto pode ser feito com% em vez de pixels exatas, caso em que os dados são gerados a partir de um banco de dados ea altura varia de acordo com cada página.

Fonte: aqui

Demonstração: ligado na página acima

Aqui vai minha primeira resposta ...

Você já tentou vertical-align: middle; ?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top