如何在引导网格中居中文本

Question

我有一个网格分为2.一边是图像，另一边是文字。目前看起来如下：

我想让它看起来如下：

我希望摆脱黑点并使文本居中。水平居中没有问题，但无法垂直对齐以适应图像。如果bootstrap中已经有任何预构建的类，或者我需要重写其他CSS，请提供建议。

以下是我目前的html和css。

HTML

    <div class="col-md-6 custom-info">
        <img src="img/test.jpg" class="img-responsive center-block">
    </div>

    <div class="col-md-6 custom-info text-center" style="text-align: left;">
        <h1>Discover Our Latest Colourful addition</h1>
        <h3>Explore our range of text text text text.</h3>
        <h3><a href="menu.html">View the menu.</a></h3>

    </div>

CSS

.custom-info{
    background-color: #c0d023;
    padding: 30px;
} 

编辑后：

Answer 1

你可以试试这个。

HTML

<div class="row xclassrow">
<div class="col-md-6 custom-info">
    <img src="http://i.imgur.com/VpelmxT.png?1" class="img-responsive center-block">
</div>
<div class="col-md-6 custom-info text-left">
    <div class="content">
         <h1>Discover Our Latest Colourful addition</h1>

         <h3>Explore our range of text text text text.</h3>

    </div>
     <h3><a href="menu.html">View the menu.</a></h3>

</div>

CSS

.xclassrow{
background-color:#C0D123
}
.content {padding:40px 0px}
.custom-info{
background-color: #c0d023;
padding: 30px;
} 

希望这有效。如果还有任何问题，请复出。!!

编辑：删除了xclass并将内容包装在新类中。检查 DEMO

Answer 2

的 TLDR;

将 display：table 与 display：table-cell 一起使用，以实现元素的垂直居中。

对于较新的浏览器，您可以使用 flexbox 。我将在这里展示这两种方法。

旧但安全的方式（可能不适合你）

我大部分时间都做的是定义2个辅助类，名为 t 和 td

*如果您有一个已定义的包含元素高度

，则此方法有效

代码看起来像这样：

<强> HTML

<div class="col-md-6 custom-info text-center" style="text-align: left;">
    <div class="t">
        <div class="td">
            <h1>Discover Our Latest Colourful addition</h1>
            <h3>Explore our range of text text text text.</h3>
            <h3><a href="menu.html">View the menu.</a></h3>
        </div>
    </div>
</div>

<强> CSS

.t { 
    display: table; 
    height: 100%; 
}
.td { 
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

Jsfiddle

旧的，更安全的方式

因为您知道您的2列是6 + 6并且总长度为12列。 制作一个长元素 col-md-12 并在其中创建一个表（使用常规表元素或上面示例中使用的辅助类。

<强> HTML

<div class="col-12 specific-class">
    <div class="t">
        <div class="td">
            <img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
        </div>
        <div class="td">
            <h1>Discover Our Latest Colourful addition</h1>
            <h3>Explore our range of text text text text.</h3>
            <h3><a href="menu.html">View the menu.</a></h3>   
        </div>    
    </div>
</div>

<强> CSS

.specific-class .td {
    width: 50%;
    background: rgba(0,0,0,.2);
}
.t { display: table; height: 100%; width: 100%; }
.td { display: table-cell; vertical-align: middle; height: 100%; }

Jsfiddle

注意：为图像添加垂直对齐以消除其下的小间距

强大的弹性箱（未来看起来很明亮）

对于我们的fe-devs来说，Flexbox是眼睛疼痛的景象，并将成为未来www的一个不可或缺的组成部分。

HTML

<div class="col-12 specific-class">
    <div class="fl-element">
        <img src="http://static.adzerk.net/Advertisers/d936d243e9de4c989a6c95b031eb11d6.png" alt="">
    </div>
    <div class="fl-element">
        <h1>Discover Our Latest Colourful addition</h1>
        <h3>Explore our range of text text text text.</h3>
        <h3><a href="menu.html">View the menu.</a></h3>   
    </div>    
</div>

<强> CSS

.specific-class {
    display: flex;
    align-items: center;
}
.specific-class .fl-element {
    width: 50%;
}

Jsfiddle