垂直方向のセンタリングdiv最小単位の相対div

Question

絶対配置divがブートストラップ列内に配置されています（相対配置されています）絶対divも列も定義された高さを持っていません。ただし、列divの最小高さは400pxです。

HTML

<section class="row row-eq-height"> 
    <div class="col-sm-6"> 
     <div class="section-content"> 
      ... content ... 
     </div> 
    </div> 

    <div class="col-sm-6 section-img"> 
     ... full cover image ... 
    </div> 
</div> 

CSS

@media screen and (max-width: 768px) { 

    .section-content { position: absolute; } 

    .section-img { min-height: 400px; } 

    .row-eq-height { 
    position: relative; 
    min-height: 400px; 
    } 

768pxの画面が.SECTION-コンテンツのdivは.SECTION-IMG divの上にトップになります。カラムの高さは.section-imgに置かれた最小高さによって生成されます。 私はカラムの中で.section-contentを垂直にセンタリングしようとしています。 //////

Answer 1

テーブルを使用する必要はありません。私が正しくあなたを理解していればロブは述べたように、インナーラッパーを作成し、vertical-align: middle;

<div class="col-sm-6 section-img"> 
    <div class="middle">... full cover image ...</div> 
</div> 

でtable-cellにtableとインナーラッパーに親コンテナの表示プロパティを設定するここでCSSです

.section-img { 
    min-height: 400px; 
    display: table; 
} 
.middle { 
    display: table-cell; 
    vertical-align: middle; 
}