Question

我无法弄清楚如何让我的照片水平。我正在使用bootstrap和emmet。我试过浮子和显示器。这是我的代码：

          <div class="container">
            <div class="row">
                <div class="bottombanner">
                    <col-sm-3><img class="img-thumbnail" src="https://www.worldmapsonline.com/images/murals/mercator_classic_world_political_wall_mural_lg.jpg" alt=""></col-sm-3>
                    <col-sm-3><img class="img-thumbnail" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""></col-sm-3>
                    <col-sm-3><img src="" alt=""></col-sm-3>
                    <col-sm-3><img src="" alt=""></col-sm-3>
                </div>
            </div>
          </div>

然后这是我的CSS：

.bottombanner {
max-width: 20%;
max-height: auto;
display: inline-block;
float: left;
}

我已尝试用它们和其中一个进行浮动和显示，但无济于事。

我也尝试过使用和不使用div容器来查看。我也试过使用引导程序img-responsive，但它似乎没有效果，我把它取下来因为我想我记得img-responsive自动中心？

Answer 1

什么是<col-sm-3>是div还是什么？

一种简单的方法是水平对齐图像，以模拟表格显示属性。

.bottombanner {
    display: table;
}

.col-sm-3 {
    display: table-cell;
    vertical-align: middle;
}

这应该让你的图像彼此水平对齐。

Answer 2

试试这个

<div class="container">
    <div class="row">
        <div class="bottombanner">
            <div class="col-sm-3"><img class="img-thumbnail" src="https://www.worldmapsonline.com/images/murals/mercator_classic_world_political_wall_mural_lg.jpg" alt=""></div>
            <div class="col-sm-3"><img class="img-thumbnail" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""></div>
            <div class="col-sm-3"><img src="" alt=""></div>
            <div class="col-sm-3"><img src="" alt=""></div>
        </div>
    </div>
</div>

使用col-sm-3作为课程。由于您在bottombanner中将宽度设置为20％，因此您的图片尺寸非常小。

水平对齐图片

2 个答案: