如何垂直居中引导 3 行和列？答案

【问题标题】：How to vertically center bootstrap 3 rows and columns?如何垂直居中引导 3 行和列？
【发布时间】：2015-04-18 06:01:48
【问题描述】：

我已经尝试了几种已发布的解决方案来使其正常工作，但似乎无法实现。我在这里做错了什么？

我希望 IMG、P 和 BUTTON 元素在它们的 div 中彼此垂直居中 [而不是堆叠] 以及行。

这是我目前所拥有的：

<div class="container rider">

    <div class="row">

        <div> 
            <div class="col-sm-4 col-xs-12 left">
                <img src="/assets/images/tech-tips.png" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>


        <div>
            <div class="col-sm-4 col-xs-12 center">
                <img src="/assets/images/tech-tips.png" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>


        <div>
            <div class="col-sm-4 col-xs-12 right">
                <img src="/assets/images/tech-tips.png" />
                <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                <button class="btn btn-default btn-small">go</button>
            </div>
        </div>

    </div>

</div>

而 CSS 会覆盖现有的 Bootstrap 3 CSS。

.rider > .row , .rider > .row > div, .rider > .row > div > div {
    vertical-align:middle;
    }

.rider img, .rider p, .rider button {
    display:inline-block;
}
.rider img {
    float:left;
}
.rider p {
    width: 140px;
    margin: 0;
    padding: 0;
    }

.rider button {
    float:right;
}

*注意：IMG、P 和 BUTTON 标签在每一列中应该彼此并排，而不是堆叠。

【问题讨论】：

尝试添加空格：nowrap;还有
我无法从您的代码 sn-p 中看出，但如果您的图像太大，则会将段落和按钮元素强制到下一行。您可以创建一个jsFiddle 包含的图像 URL 位置吗？
您的 BS cols 不应包含在其他 div 中。另外，这个问题之前已经被问过很多次了：stackoverflow.com/questions/20547819/…

标签： css twitter-bootstrap

【解决方案1】：

使用 Bootstrap 的 media-middle 类。这样您就可以消除额外的 CSS。

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-xs-12">
            <div class="media">
                <div class="media-left">
                    <img src="//placehold.it/150">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                    <button class="btn btn-default btn-small">go</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="media">
                <div class="media-left">
                    <img src="//placehold.it/150">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                    <button class="btn btn-default btn-small">go</button>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="media">
                <div class="media-left">
                    <img src="//placehold.it/150">
                </div>
                <div class="media-body media-middle">
                    <p>Lorem ipsum dolor sit amet, adipiscing elit.</p>
                    <button class="btn btn-default btn-small">go</button>
                </div>
            </div>
        </div>
    </div>
</div>

演示：http://codeply.com/go/7tHkfiSWT4

【讨论】：

【解决方案2】：

这是一个 PEN，我不久前创建了一个类似的 Question。我使用了 3 种不同的方法在中间垂直对齐。

translate
display:table-cell
line-height

【讨论】：

【解决方案3】：

只需使用以下 CSS。

.rider img,
.rider p,
.rider button {
    display: inline-block;
    vertical-align: middle;
}

【讨论】：