我有一个用于照片库的标准循环，并且我使用的是twitter-bootstrap col-xs-12 col-sm-6 col-md-4 col-lg-3，它为我在桌面上提供了4张图片，并在移动设备上缩小为一张照片。
一切都很好。
令我烦恼的一件事是，我希望在移动设备上查看时，单张照片在页面上居中对齐，但它们都保持左对齐。
因此，这是我正在做的一些基本伪操作：
<div class="container">
<div class="row">
<?php
foreach ($photos AS $photo) {
?>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<img src="pathtoimage">
</div>
<?php
}
?>
</div>
</div>
再次，实际的循环部分以及四个到一个的完美工作，我只是停留在如何使移动视图（col-xs-12）居中于页面中间而不是左对齐的位置上。
有人知道使这种情况发生的自举魔法吗？
您可以使用一些CSS将图片居中。我制造了一个小提琴
如果要使图像居中，则仅添加某些断点，然后可以使用媒体查询将它们在某些断点处居中。
例如，要将图像仅居中放置在小屏幕上：
@media(max-width: 768px) {
.gallery-image img {
display: block;
margin: 0 auto;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句