Home > Web Front-end > HTML Tutorial > [bootstrap]bootstrap2如何引导div垂直居中 - CQ_LQJ

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

WBOY
Release: 2016-05-21 08:54:29
Original
1865 people have browsed it

参考网址: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>;
}
Copy after login

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template