Question

我有这段代码响应，我想垂直和水平居中图像。任何人都可以帮我解决这个令人费解的难题吗？

<div class="row">
<div class="col-xs-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img src="http://dreamatico.com/data_images/banana/banana-5.jpg" /></a></div>
<div class="col-xs-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img src="http://dreamatico.com/data_images/banana/banana-5.jpg" /></a></div>
<div class="col-xs-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img src="http://dreamatico.com/data_images/banana/banana-5.jpg" /></a></div>

Answer 1

试试这个

.col-xs-4 {
        display: table-cell;
        float: none;
        vertical-align: middle;
    }

Answer 2

您可以使用课程img-responsive center-block作为图片。通过这种方式，图像将处于绝对中心并具有响应性。

<div class="row">
<div class="col-md-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img class="img-responsive center-block" src="http://dreamatico.com/data_images/banana/banana-5.jpg"></a></div>
<div class="col-md-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img class="img-responsive center-block" src="http://dreamatico.com/data_images/banana/banana-5.jpg"></a></div>
<div class="col-md-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img class="img-responsive center-block" src="http://dreamatico.com/data_images/banana/banana-5.jpg"></a></div>
</div>

以下是Demo。希望这会有所帮助。

Answer 3

我似乎找到了解决方案。这是一个Demo。添加了这个css

 .div-center {
display: flex;
align-items: center;
}
.img-center {
margin: 0 auto;
padding: 1em;
}

Answer 4

您可以使用img-responsive（http://getbootstrap.com/css/#images-responsive）和center-block（http://getbootstrap.com/css/#helper-classes-center）类。这些是twitter bootstrap提供的实用程序类。

你修改过的html看起来像这样

<div class="row">
    <div class="col-md-4 center-block">
        <a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More">
             <img class="img-responsive" src="http://dreamatico.com/data_images/banana/banana-5.jpg">
        </a>
    </div>
    ....... Repeat for other divs
</div>

Answer 5

你应该为每个div赋予min-height并设置css属性，如：

div{ margin:0 auto;}

Bootstrap Div标签内的绝对中心图像

5 个答案: