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

WBOY
Freigeben: 2016-05-21 08:54:29
Original
1847 Leute haben es durchsucht

参考网址: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>;
}
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage