0

我正在尝试使用 cs 将引导程序 3 中的列内容居中，如下所示：

.row{
padding: 40px 0px;
width: 100%;
min-height: 100%;
display:table;
height: 100%;
position:relative;

}


@media (min-width: 1200px)
{
.col-lg-6,
.col-lg-4,
.col-lg-8 {
display: table-cell;
vertical-align:middle;
float: none;
}

}

@media (min-width: 992px)
{
.col-md-6, 
.col-md-4, 
.col-md-8 {
float: none; 
display: table-cell;
vertical-align:middle;

}
}

HTML

<div class="fill">      

<div class="row" id="section-0">

<div class="col-lg-6 col-md-6">
<h1>Webtoaster</h1>
<p>some text  </p> 
</div>
<div class="col-lg-6 col-md-6">
<img src="img/koko.png" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class="row" id="section-1">
<div class="col-lg-4">
<h1>Heading</h1>
<p>some text</p>
</div>
<div class="col-lg-8"><img src="img/fista.png" class="img-responsive" >
</div>
</div>

上面的代码确实垂直居中，但在 Firefox 中，我的图像不再响应，并且不会在调整窗口大小时缩放。它确实在 chrome 和 Safari 中调整大小，但是当我调整到非常小的屏幕时，它不会将图像放在文本下方。这个问题是由 float: none; 引起的。如果我评论它，所有的响应都很好。这里的页面示例：http: //jajko.byethost16.com 请帮助

4

1 回答 1

0

就像亚当说的，不要修改网格。只需在你的 col div 中放置一个 div 并给它 display: table, height: 100% 并在其中放置另一个 div 与 display: table-cell 和 vertical-align: middle。

于 2013-10-08T13:42:24.400 回答