如何在响应布局中垂直对齐div内的文本

Question

我正在使用bootstrap网格系统来构建网站

div中有一个文本，我想将它垂直对齐到中间

目前的HTML是

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 right">
    <p>Hatha with Steve Smith</p>
    <p>Pure Yoga is dedicated to serving the yoga community in Asia by offering diverse yoga practices - Vinyasa, Hatha, Hot, Wall Rope Yoga, Pre-Natal, &amp; more...</p>
</div>

和CSS

@media (min-width: 1140px)
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
}

.video_bar .right p:first-child {
    font-size: 15px;
    font-weight: bold;
    margin-top: 30px;
}

所以你可以注意到，现在文本使用margin-top来假装对齐中间，最好的做法不是那样。 如何解决？

演示网站：

http://internal001.zizsoft.com/yoga/section/beginners

谢谢你的帮助。

Answer 1

试试这个

CSS

.video_bar .left {
    border-right: 1px solid #e2e2e2;
    display: table-cell;
    float: none;
    padding: 0;
    position: relative;
    vertical-align: middle;
}

.col-lg-9.col-md-9.col-sm-9.col-xs-12.right {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

.video_block a, 
.video_bar a {
    color: #666666;
    display: table;
}

编辑因为您的断点是sm，您需要vertical-align: middle on >768px所以您只能将此代码用于此类似

@media (min-width: 768px) {
    .video_bar .left {
        border-right: 1px solid #e2e2e2;
        display: table-cell;
        float: none;
        padding: 0;
        position: relative;
        vertical-align: middle;
    }

    .col-lg-9.col-md-9.col-sm-9.col-xs-12.right {
        display: table-cell;
        float: none;
        vertical-align: middle;
    }

    .video_block a, 
    .video_bar a {
        color: #666666;
        display: table;
    }
}

在小宽度上，您将保持boostrap布局。