我正在尝试使用不同的图像创建引导程序网格布局。除了在Chrome上的移动检查器中查看不同移动设备时,一切都很好。以下是检查员看起来像的图片。第二张图像与前一张图像略有偏离。移动设备上的引导程序网格布局
<section class="container" id="main">
<section class="center-block text-center">
<h4>Random Column Number 1</h4>
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?2017" width="500px" height="262px"/>
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 2</h4>
<img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" width="500px" height="262px" />
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 3</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" width="500px" height="262px" />
</section>
</section>
这里是JSFiddle。问题是,我试图将第二部分设置为“col-lg-6中心块文本中心”类。如果我删除col-lg-6,它工作得很好。但我希望能够将两个图像堆叠在一起。有什么方法可以纠正这个问题,使它像第一个图像一样居中? JSFiddle包含三个图像。
这的确行得通,但是我希望尽可能保持图像的大小相同。 – Dexstrum
第一张图像比其他图像大,因为它不限于列大小。 – Dexstrum
你仍然可以在img上设置宽度/高度,它们只是不成比例。居中问题是由于图像上没有“中心块”。 – ZimSystem