13

div 内のテキストを強制的に中央に垂直に揃える正しい方法は何ですか? いくつかの「トリック」を見つけましたが、単一行と複数行で機能するものが必要です。うまくいけば、ばかげた単純なものが欠けています:

http://jsfiddle.net/rogerguess/DawFy/

.header {
    display: inline-block;    
    text-align: center;
    width: 123px;
    background: green;
    border-radius: 4px 4px 4px 4px;
    height: 80px;
    vertical-align: middle;
}

<div >
    <div class="header">test1 </div>
    <div class="header">some text that will wrap</div>
    <div class="header">test3</div>
</div>
4

6 に答える 6

19

display: inline-block;に変更display: table-cell;

于 2013-04-23T15:17:28.187 に答える
2

親 div で display: table-cell プロパティを使用して、簡単な例を作成しました。

CSS:
    .outer {
    width: 500px;
    height: 500px;
    display: table-cell;
    background-color: red;
    vertical-align: middle;
}

.inner {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0px auto;
    background-color: yellow;
}

HTML: <div class="outer"> <div class="inner"> </div> </div>

http://jsfiddle.net/aKT42/

于 2013-10-11T11:24:47.487 に答える
1

これを試してください、うまくいきます。

    <div class="greenBorder" id="outer">
         <div id="middle">
             <div class="greenBorder" id="inner">
             Your Text Here
             </div>
         </div>
    </div>

CSS クラス

    #outer {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        display: table;
        position: static;
    }

    div.greenBorder {
        background-color: #39B9FF;
        text-align: center;
        color: white;
    }

    #middle[id] {
        display: table-cell;
        position: static;
        vertical-align: middle;
        width: 100%;
    }

    #middle {
        position: absolute;
        top: 50%;
    }
于 2014-04-18T07:29:16.027 に答える
0

これらの解決策のほとんどは、高さが手動で指定された (私にはできませんでした) か、インライン ブロックやフロートのようなものが内部 div が親 div の高さを継承する機能を削除するため、うまくいきません。最終的に、それぞれに div を含む 2 つの列を持つテーブルを作成しましたが、テキストを垂直方向に中央揃えする際に問題はありませんでした。

于 2015-02-06T23:04:41.150 に答える