Rumah > hujung hadapan web > html tutorial > [bootstrap]bootstrap2如何引导div垂直居中 - CQ_LQJ

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

WBOY
Lepaskan: 2016-05-21 08:54:29
asal
1867 orang telah melayarinya

参考网址: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>;
}
Salin selepas log masuk

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan