css - テキストを垂直方向に揃えるには?

Question

フローティング div でテキストを垂直方向に揃える方法は? 例: 高さが固定された動的コンテンツがあります。コンテンツが小さいか大きい場合は、自動的に垂直方向に整列する必要があります。

ありがとう

Answer 1

テーブルセルが最も簡単なソリューションです。

Javascriptは代替手段です（divのサイズとテキストサイズを測定してから、パディングや行の高さなどを調整します）。

編集：またはこの素晴らしいCSS：

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>

しばらくの間、これについてブログに投稿するつもりでしたが、今がその時だと思います。

Answer 2

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

Answer 3

Chris Coyier は、これに関する優れたチュートリアルを書きました: http://css-tricks.com/vertically-center-multi-lined-text/

私はそれを自分で使用しましたが、完全に機能します。

Answer 4

私は以前にこの問題に遭遇しました。専門家の言葉を引用しますので、これをごまかすことはありません 。

これは、データがデータベースから生成され、ページごとに高さが異なる場合に備えて、正確なピクセルの代わりに % を使用してすべて実行できます。

出典：こちら

デモ: 上記のページにリンクされています

これが私の最初の答えです...

Answer 5

vertical-align：middleを試しましたか。？