web-dev-qa-db-ja.com

Bootstrap divコンテナでテキストを垂直方向に揃える方法

列の中央にテキストを垂直に配置するための最良/適切な方法は何ですか？画像の高さはCSSで静的に設定されます。

外側のdivをdisplay: tableに、内側のdivをdisplay: table-cellにvertical-align: middleに設定しようとしましたが、どちらも機能しませんでした。

enter image description here

HTML

<section id="browse" class="browse">
    <div class="container">
        <div class="row">
            <div class="col-md-5 col-sm-5">
                <h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-6 col-sm-7 animation_container">
                <img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/>
                <img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/>
            </div>
        </div>
    </div>
</section>

CSS

.browse .container, .blind_dating .container { padding-bottom: 0; }
.animation_container { position: relative; }
.browse .animation_container { height: 430px; }
.animation_img { position: absolute; bottom: 0; }
.animation_img1 { right: 25%; }
.animation_img2 { right: 25%; }
htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment
22
The Nomad

HTML：

まず、テキストコンテナにクラスを追加して、それに応じてアクセスしてスタイルを設定できるようにする必要があります。

<div class="col-xs-5 textContainer">
     <h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3>
</div>

CSS：

次に、次のスタイルを適用して、横にある画像divのサイズに応じて、垂直に配置します。

.textContainer { 
    height: 345px; 
    line-height: 340px;
}

.textContainer h3 {
    vertical-align: middle;
    display: inline-block;
}

全部終わった！まだ少しずれていると思われる場合は、上のスタイルの線の高さと高さを調整します。

作業例

36
Fizzix
h2.text-left{
  position:relative;
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

説明：

top：50％スタイルは、本質的にヘッダー要素を親要素の上部から50％押し下げます。 translateYスタイリングも同様に、要素を上から50％下に移動することで機能します。

これは、ヘッダー要素のtopを50％だけ下に移動し、残りのコンテンツがその下を埋めるため、1行（おそらく2行）のテキストのヘッダーでうまく機能することに注意してください。複数行のテキストでは、垂直方向にわずかに下に表示されます。

複数の行の可能な修正は、50％をわずかに下回る割合を使用することです。

9
Brian