Bootstrap如何在div容器中将文本设置为垂直对齐

Question

在列的中间垂直对齐文本的最佳/正确方法是什么？图像高度在CSS中静态设置.

我尝试过设置一个外部div display: table和一个内部div display: table-cell,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%的百分比.