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

Adam が言ったように、グリッドを変更しないでください。col div 内に div を配置し、それに display: table, height: 100% を指定し、その中に別の div を display: table-cell および vertical-align: middle で配置します。

于 2013-10-08T13:42:24.400 に答える