1

コンテナーの高さが分からない場合、水平方向と垂直方向の両方でコンテナー div の中央に div 要素を配置しようとしています。

ドキュメントの高さと幅全体に合わせてコンテナ要素を絶対配置で設定しましたが、垂直方向の配置を取得できません。

.ui .chv {
  text-align: center; 
  position: absolute; 
  top: 60px;
  bottom: 50px; 
  left: 20px;
  right: 20px; 
  display: block;
  margin: 0; 
  height: auto;
  background: green; 
  text-align: center;
  vertical-align: middle;
}

ライブデモ

</p>

4

1 に答える 1

3

vertical-align：middleは、divにdisplay：table-cellスタイルがある場合に機能します。「display：table-cell」を含むDivには、display：tableを含む親divが必要です。

次のHTMLを中に入れます<div class="chv"></div>

<div class="table full-width full-height">        
            <div class="table-cell align-middle">
                TEST
            </div>
 </div>

したがって、最終的なマークアップは次のようになります

<div align="center" class="ui">
    <div class="chv">

        <div class="table full-width full-height">        
            <div class="table-cell align-middle">
                TEST
            </div>
        </div>    

    </div>    
</div>​

jsfiddleでこれを参照してください

幅と高さを100％に設定するために、.full-width、.full-heightクラスを追加しました。

于 2012-11-25T16:10:44.783 に答える