bootStrap实现垂直居中 - bootStrap技巧

方法一:受垂直导航的居中对齐启发实现此要求,具体代码如下:

一、图片的垂直(水平)居中

1 <div class="container">
2   <div class="nav flex-column justify-content-center bg-light" style="height:500px;">
3     <img src="http://www.aqzx.gov.cn/images/upfile/video/20181119115248691.jpg" width="300" height="150" class="m-auto" />
4   </div>
5 </div>  

样式说明:

a) nav 导航基类

b) 由于要实现垂直居中,所以这里定义一个垂直导航

c) justify-content-center 类用于实现内容区域垂直居中。

d) 图片通过类 m-auto 实现水平居中

 

二、文字的垂直(水平)居中

1 <div class="container">
2   <div class="nav flex-column justify-content-center bg-light text-center text-success" style="height:500px;">
3     <h1>正在学习bootStrap!</h1>
4   </div>
5 </div>

样式说明:

a) nav 导航基类

b) 由于要实现垂直居中,所以这里定义一个垂直导航

c) justify-content-center 类用于实现内容区域垂直居中。

d) 文字通过类 text-center 实现水平居中

 

方法二:通过媒体对象的align-self-center来实现,建议使用此方法

1   <div class="media bg-primary" style="height:400px;">
2     <img src="http://www.aqzx.gov.cn/images/upfile/video/20181119115248691.jpg" class="align-self-center mx-auto"/>
3   </div>

 

posted @ 2019-05-13 20:37 网申 阅读(...) 评论(...) 编辑 收藏