Question

我想将两个图像并排放入div中，其中两个图像都居中于父div。我正在使用bootstrap 3. plz help

这是我的标记：

    <div class="well text-center">
        <span>Sister Properties:</span>
            <a href="#"><img src="img/innlogo.png" class="img-responsive" alt="inn_logo" /></a> <a href="#" ><img src="img/cclogo.png" class="img-responsive" alt="ccs_logo" /></a>
    </div>

我不能使用＆＃34; row-column＆＃34; div但是我想用＃34; well＆＃34;格。

Answer 1

您的img-responsive自适应课程会为您的图片提供display:block，以防止他们居中;尝试删除它。另外，为了将它们并排放置，可以使用Bootstrap的网格系统。您可以在此处详细了解：http://getbootstrap.com/css/#grid。

以下是您可以这样做的方法：

<div class="well text-center">
    <span>Sister Properties:</span>
    <div class="col-md-6">
        <a href="#"><img src="img/innlogo.png" alt="inn_logo" /></a>
    </div>
    <div class="col-md-6">
        <a href="#" ><img src="img/cclogo.png" alt="ccs_logo" /></a>
    </div>
</div>

您可以在此处播放：http://www.bootply.com/YSlrhJHBls

编辑：要使顶部文字中心添加12宽col。为确保图像在井内，请将其包含在div类row内，如下所示：

<div class="well text-center">
    <div class="col-md-12">Sister Properties:</div>
    <div class="row">
        <div class="col-md-6">
            <a href="#"><img src="http://lorempixel.com/400/200/" alt="inn_logo"></a>
        </div>
        <div class="col-md-6">
            <a href="#"><img src="http://lorempixel.com/g/400/200/" alt="ccs_logo"></a>
        </div>
    </div>
</div>

以下是更新的bootply：http://www.bootply.com/TuXAsykG7e

Answer 2

在你的css上试试这个：

.well img{
display: inline-block;
}

如何使用bootstrap3将两个图像并排放入div中？

2 个答案: