Maison > interface Web > tutoriel HTML > [bootstrap]bootstrap2如何引导div垂直居中 - CQ_LQJ

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

WBOY
Libérer: 2016-05-21 08:54:29
original
1866 Les gens l'ont consulté

参考网址: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>;
}
Copier après la connexion

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal