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

我正在使用引导网格系统来建立网站

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

.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，所以需要在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布局。
简短回答：你不能；垂直对齐的最佳方式通常是使用表元素。。。（或者使用JS动态编辑，在渲染后获得所有内容的高度，并添加边距以获得50%）可能的副本，甚至还有更多副本。关于：这个问题/问题。也有多种方法来解决这个问题……您是否介意为小型设备提供一些CSS示例？谢谢
@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;
    }
}