Bootstrap如何在div容器中將文本設置為垂直對齊

Question

在列的中間垂直對齊文本的最佳/正確方法是什么？ 圖像高度在CSS中靜態設置。

我已經嘗試設置一個外部div來display: table和一個內部div來display: table-cell with vertical-align: middle但是也沒用。

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%; }

Answer 1

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;
}

全部做完！ 如果您認為它仍然略微不對齊，請調整上面樣式的線高和高​​度。

工作實例

Answer 2

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

說明：

頂部：50％樣式基本上將標題元素從父元素的頂部向下推50％。 translateY樣式也以類似的方式通過將元素從頂部向下移動50％來起作用。

請注意，這適用於帶有1行（可能是2行）文本的標題，因為這只會將標題元素的頂部向下移動50％，然后其余內容填充在下面，這意味着有多行文本它看起來略低於垂直對齊。

多行的可能修復方法是使用略低於50％的百分比。

Answer 3

你能不能簡單地補充一下：

align-items:center;

到你的行div中的新類。 實質上：

<div class="row align_center">

.align_center { align-items:center; }