>웹 프론트엔드 >HTML 튜토리얼 >[bootstrap]bootstrap2如何引导div垂直居中 - CQ_LQJ

[bootstrap]bootstrap2如何引导div垂直居中 - CQ_LQJ

WBOY
WBOY원래의
2016-05-21 08:54:291887검색

参考网址:http://www.4byte.cn/question/138712/bootstrap-how-to-center-vertical.html

部分参考自上面网页中的方法.用过bootstrap的同学知道,bootsrap2中可以使用栅格布局让div水平居中,那么如何让水平居中的div又垂直居中呢?

class="container">
class="row">
class="span4 offset4" style="padding:5 20 5 20;">
Some text text text text text .....


直接在css里面设置就可以实现居中,css代码:

<span style="color: #008000;">/*</span><span style="color: #008000;">web background</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.container</span>{<span style="color: #ff0000;">
   display</span>:<span style="color: #0000ff;">table</span>;<span style="color: #ff0000;">
   height</span>:<span style="color: #0000ff;">100%</span>; 
}<span style="color: #800000;">

.row</span>{<span style="color: #ff0000;">
   display</span>:<span style="color: #0000ff;"> table-cell</span>;<span style="color: #ff0000;">
   vertical-align</span>:<span style="color: #0000ff;"> middle</span>;
}

这样就实现了div的水平加垂直剧中了,完毕!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.