我正试图将div放在页面中心,水平和放大;垂直。这是实现的,但有一些左右填充,铬。如何删除它。在Firefox中运行良好。
MyStyle.css:
html, body
{
height:100%;
margin:0;
padding:0;
}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding:0;
}
.row-fluid
{
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering {
float:none;
margin:0 auto;
}
// bootstrap css for .container-fluid
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
HTML:
<div class="container-fluid">
<div class="row-fluid" style="background-color: blue">
<div class="centering text-center col-lg-1"
style="background-color: green">
Yeah I'm centered
</div>
</div>
</div>
蓝色不填充镀铬页面,右边有填充和左
答案 0 :(得分:1)
好的我明白了。在CSS中添加了一个称为内容的伪元素,导致了这个问题。在css: how to remove pseudo elements (after, before, ...)的帮助下,我找到了一个解决方案,将其添加到您的CSS中:
.container-fluid:before{
content:none;
}
.container-fluid:after{
content:none;
}
改变你的中心课程:
.centering {
float:none;
margin:0 auto;
padding-left:0px;
padding-right:0px;
}
<强> Bootply Demo 强>