如何在响应布局中垂直对齐div内的文本(How to vertical align the text inside a div in responsive layout)

我正在使用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, & 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

谢谢你的帮助。

I am using bootstrap grid system to build website

There is a text inside div and I would like to vertical align it to middle

Current HTML are

And CSS

So you can notice that right now the text is using margin-top to pretend the align middle, and the best practice is not that. How to fix that?

Demo site:

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

Thanks for helping.

最满意答案

尝试这个

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布局。

Try this

CSS

Edit Since your breaking point is sm you need vertical-align: middle on >768px so you can use this code only for that like this

And on small width you will keep boostrap layout.

更多推荐