2

CSS ルールvertical-align: middle;をそのセルに適用する表のセルにいる場合、すべてのテキストがセルの垂直方向に中央揃えになります。

<table>
    <tr>
        <td style="vertical-align: middle;">
            I am vertically centered text!
        </td>
    </tr>
</table>

ただし、これを別の要素に適用すると、機能が異なるか、まったく機能しません。例えば：

<div style="width: 300px; height: 400px; vertical-align: middle;">
    I am not vertically centered, but I wish I was :(
</div>

しかし、それを画像タグに適用すると、画像が他のインライン要素でどのように配置されるかが調整されます。

これらすべてのシナリオの例を含む jsfiddle を次に示します。

私の質問は、テーブル セルでの動作と同じように、単純な DIV 内で垂直方向の中央揃えを実現するにはどうすればよいですか?

4

4 に答える 4

2

display: table-celldivに追加します。

jsFiddle： http: //jsfiddle.net/7FYBa/20/

<div class="outer" style="position:absolute;">
    <div class="inner" style="display:table-cell; vertical-align:middle;">
        I am not vertically centered, but I wish I was :(
    </div>
</div>
于 2012-05-08T20:29:38.053 に答える
2

しかし、もちろん。垂直方向のセンタリングは、CSS では非常にファンキーです。

そこにある垂直センタリング手法のいくつかを読んでみることをお勧めします。さまざまな要素と考慮事項は、さまざまな方法に相当します。これが私が提案する記事です。

于 2012-05-08T20:36:14.550 に答える
0

jQuery http://jsfiddle.net/7FYBa/30/を使用して、このようなことを試すことができます

于 2012-05-08T20:41:30.647 に答える
0

vertical-alignを増やすと、none-table-elements で機能しますline-height。 

#elem {
    vertical-align: middle;
    line-height: 100px;
}

しかし、もちろん、レイアウトは を使用してそれほど簡単ではありませんline-height。

于 2012-05-08T20:45:07.407 に答える