Question

我已经尝试了几种已发布的解决方案来实现这一目标，但似乎无法实现。我在这里做错了什么？

我想要IMG，P＆amp; 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＆amp; BUTTON标签应该在每列中彼此相邻，而不是堆叠。

Answer 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

Answer 2

以下是 PEN ，我为类似的 Question 创建了一段时间。我使用了3种不同的方法在中间垂直对齐。

translate
display:table-cell
line-height

Answer 3

只需使用以下CSS。

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

如何垂直中心引导3行和列？

3 个答案: