CSS：图像居中[问题]

Question

http://alexandermasters.com/flora/2015/10/05/corey-boyce/

尝试将图像水平居中于各自的容器中。

似乎无法隔离要应用的正确元素

display: block;
margin-left: auto;
margin-right: auto;

从图像开始逐步完成代码，然后向上移动无效。

Answer 1

试试这个CSS代码

.gallery-item {float:none; margin:0 auto; text-align:center}

1. 定位IMG标记不起作用，因为它嵌套在另一个元素中，因此您必须将img的父级居中。

2. 当有浮动时，margin：auto将无法正常工作

Answer 2

如果您不关心IE9兼容性，可以通过将display: flex应用于父<dt>元素来轻松实现此目的。

如果你还没有读过这个漂亮的CSS3成员，请查看Chris Coyier的Complete Guide to Flexbox。我也推荐Paddi McDonnell的这个article。

Flexbox经历了一些prefixing inconsistencies，因此如果这些用户对您很重要，那么拥有后备风格是明智之举。

Answer 3

试试这个：

.gallery {
  text-align: center;
}
.gallery dl {
  display: inline-block;
  float: none;
}

（同时清除浏览器缓存）