Bootstrap如何在div容器中获取文本垂直对齐 [英] Bootstrap how to get text to vertical align in a div container

问题描述

在文本列中间垂直对齐文本的最佳/正确方法是什么？

我已经尝试将外部div设置为 display：table 一个内部div到 display：table-cell 和 vertical-align：middle / p>

>

HTML

 < section id =browse =browse> 
< div class =container> 
< div class =row> 
< div class =col-md-5 col-sm-5> 
< h2 class =text-left>与其他在游戏中分享相同品味的世界各地的玩家连结。< / h2> 
< / div> 
< div class =col-md-1>< / div> 
< div class =col-md-6 col-sm-7 animation_container> 
< img id =animation_img2class =animation_img animation_img2src =images / section2img2.png/> 
< img id =animation_img1class =animation_img animation_img1src =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％; } 
  

解决方案

HTML： / p>

首先，我们需要为你的文本容器添加一个类，以便我们可以访问它并相应地设置样式。

 < div class =col-md-5 col-sm-5 textContainer> 
< h2 class =text-left>与其他在游戏中分享相同品味的世界各地的玩家连结。< / h2> 
< / div> 
  

CSS：

接下来，我们将根据其旁边的图片div的大小，应用以下样式来垂直对齐。

  .browse .textContainer {
 height：430px; 
 line-height：400px; 
} 
 
 .textContainer h2 {
 vertical-align：middle; 
 display：inline-block; 
} 
  

全部完成！

工作示例

What is the best/proper way to vertically align the text in the middle of its column? The image height is statically set in the CSS.

I have tried setting an outer div to display: table and an inner div to display: table-cell with vertical-align: middle but that didn't work either.

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

解决方案

HTML:

First, we will need to add a class to your text container so that we can access and style it accordingly.

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

CSS:

Next, we will apply the following styles to align it vertically, according to the size of the image div next to it.

.browse .textContainer { 
    height: 430px; 
    line-height: 400px;
}

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

All Done! Adjust the line-height and height on the styles above if you believe that it is still slightly out of align.

WORKING EXAMPLE

这篇关于Bootstrap如何在div容器中获取文本垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！