次のように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 助けてください