Bootstrap如何让文本在div容器中垂直对齐

Posted 2023-03-05

【中文标题】Bootstrap如何让文本在div容器中垂直对齐

【英文标题】：Bootstrap how to get text to vertical align in a div container

【发布时间】：2014-10-21 17:19:01

【问题描述】：

在其列中间垂直对齐文本的最佳/正确方法是什么？图片高度是在 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%; 

【参考方案1】：

你不能简单地添加：

align-items:center;

到你的行 div 中的一个新类。本质上：

<div class="row align_center">

.align_center  align-items:center; 

【参考方案2】：

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;

全部完成！如果您认为以上样式的 line-height 和 height 仍然稍微不对齐，请调整它。

WORKING EXAMPLE

【讨论】：

@TheNomad - 随时！是的，记住垂直对齐是一个非常好的技巧。

【参考方案3】：

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

说明：

top:50% 样式本质上将标题元素从父元素的顶部向下推 50%。 translateY 样式也以类似的方式起作用，将 then 元素从顶部向下移动 50%。

请注意，这适用于具有 1 行（可能是 2 行）文本的标题，因为这只会将标题元素的 top 向下移动 50%，然后将其余内容填充到下面这意味着，如果有多行文本，它看起来会稍微低于垂直对齐。

对多行可能的解决方法是使用略低于 50% 的百分比。