行を100％幅にするにはどうすればよいですか？

Question

私はいくつかの行を整列するいくつかの問題があります。ビューポートの高さを100％とするセクションを表示しています。このセクションを画面に表示すると、このセクションのみが表示されます。

このセクションには、タイトルとサブタイトルがあります。タイトルはセクションの上部近くに表示する必要がありますが、セクションの中央に垂直に字幕を表示する必要があります。したがって、画面の高さが1000px（このセクションの高さが1000pxになる）であれば、字幕は500px付近に表示されます。私のセクションには、現在、以下の

<section class="block-hero"> 
    <div class="container container-table"> 
    <div class="row vertical-top-row"> 
     <div class="col-md-12 centerText"> 
     <h1 class="heroTitle">Some Title</h1> 
     </div> 
    </div> 
    <div class="row vertical-center-row"> 
     <div class="col-md-12 centerText"> 
     <h2 id="subTitle">Some<br>Text</h2> 
     </div> 
    </div> 
    </div> 
</section> 

のように見え、CSSはとても

html, body { 
    height:100%; 
} 
.site-wrapper { 
    overflow: hidden; 
    position: relative; 
    top: 0; 
    width: 100%; 
} 

.block-hero { 
    height:100%; 
    width: 100%; 
    z-index: 300; 
    overflow:hidden; 
} 

.container-table { 
    display: table; 
    width:100%; 
    height:100%; 
} 
.vertical-top-row { 
    display: table-cell; 
    vertical-align: top; 
} 
.vertical-center-row { 
    display: table-cell; 
    vertical-align: middle; 
    height:100%; 
} 

.centerText { 
    text-align: center; 
} 

#subTitle { 
    width: 100%; 
} 

私は私が今持っていますfiddle一つの問題は、私は現在、それを持っているかである私の行はもはや100ではない持っているようです％幅。これは、字幕が正確に中央にセンタリングされていないことを意味します。私は垂直方向の整列が働いていると思うが、今はテキストを中央に集中させる必要がある。

これを行うにはどうすればよいですか、現在のものを変更する必要がありますか？

おかげ

Answer 1

あなたは少しjsfiddleで遊んでたら、あなたを投げています事は、ブートストラップの行と列と一緒にdisplay: tableの使用のようです。ブートストラップはテーブルと一緒に動作するようには作られていません。それを置き換えるように作られているので、テーブルを使って制御するためのものです。

主なことは、あなたの行が互いに隣り合っているのではなく、隣り合っているように見えることです。それは、ブラウザにdisplay: table-row要素がないので、行にdisplay: table-cellがあるためです両方の周りにtable-row要素があるように、同じ行の2つのセルになっているので、それらは互いに隣り合うように強制します。

あなたの最善の賭けであるIMOは、1つのグリッド方法、またはもう1つ、ブートストラップまたはテーブルセルを選択することです。個人的に私はブートストラップが好きですが、それはあなたの呼び出しです。テーブルルートに移動する場合は、.rowクラスと.col-sm-12クラスをすべて削除し、以前の.rowエレメントをdisplay: table-rowに設定し、以前の.col-sm-12エレメントをdisplay: table-cellに設定します。

ブートストラップルート（私の好み）に行きたい場合は、オプションがあります。そのセクションに他のコンテンツがあるかどうかは実際には指定していませんが、そうでない場合は、.rowにmargin-top: 40%のようなものを相対距離だけ押し下げると簡単に字幕を並べることができますその上の列から。パーセンテージで遊んで、好きなものを見てください。ここにあなたの元jsfiddleに基づく例です：https://jsfiddle.net/ck3epwm5/1/

ちなみにお好みの行動はビューポート高さの100％とするセクションのために実際にある場合、あなたはheight: 100vhでheight: 100%を交換したい場合があります。これは文字通り「ビューポートの高さのパーセント」を意味する新しい（ish）CSS3長さ単位です（技術的には、1vhは「ビューポートの高さの1/100」と定義されています; MDN reference）。したがって、ビューポート自体に直接基づいています。 %の値は、指定された高さを持つ最も近い祖先に基づいており、予期しない動作を引き起こすことがあります。