在使用 float:left 的 css 三列设置中，我如何在每列内水平居中图像

Question

我已经浏览了这里的帖子，但似乎找不到想要工作的解决方案，我想知道我的 float:left 标签是否导致了问题。

基本上我有 wordpress 博客，我现在正在尝试使用 nextgen 画廊设置我想要做的事情，我需要修改它显示图像列表的方式。分为三个部分。在列中将每个图像居中。现在我已经使用以下代码进行了设置，该代码在其非常基本的下方创建了三个很好的列，但它在这里不起作用我假设我可以使用 margin:0 auto;但这不起作用。

http://jsfiddle.net/locka/dcdkf/

HTML

<div id="wrapper">
<div id="column-left">
<p>LEFT </p>
  <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQtZTDwx3wVJMqWWTlCW8BDZ7fPvQVbRZpILy0NAeHIGaRxcRtR">
</div>
<div id="column-center">
    <p>MIDDLE </p>
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTCgQRoPbKR8WpHtPZfBiPKK6NaNN3vyWqLarsKDDb0zLWd0AID"></p>
   </div>
<div id="column-right">
    <p>RIGHT </p>
   <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcScF65ryaqzfG9gpVrld1CLJ7_5wJOpmH96FRvB4TvnkFaqyloh">
</div>

CSS

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}

#column-left {
width: 280px;
float: left;
background: red;
}

#column-center {
width: 420px;
float: left;
background: GREEN;
margin: 0 auto;

}

#column-right {
width: 280px;
float: left;
background: BLUE;
}

我基本上需要连续有 3 张图像，这些图像可能是 2 尺寸，横向或纵向，高度相同但宽度不同，我需要将每张图像在其列中居中。左列和右列将与最宽的图像相同，就像风景照片一样，它们看起来总是左右对齐，并且如果肖像出现在列的中心，则它们将始终居中。然后中心列将占据其余空间，这将使所有图像居中，从而使左右边框相等。并让它们整洁。

我可以在网络上看起来很正常的内容之后设置列，因为我可能无法将图像居中。

Answer 1

默认情况下，图像是内联元素，因此会遵守其父级的text-align CSS 规则。由于 text-align 在您的情况下不起作用，这一定意味着您的图像不再是内联元素。可能在您的 CSS 中某处有一个 img { display: block }。

这意味着margin: 0 auto 应该可以解决问题。问题是您将该样式应用于 img 的容器而不是 img 本身。

所以，而不是

#column-center {
  width: 420px;
  float: left;
  background: GREEN;
  margin: 0 auto;
}

使用

#column-center {
  width: 420px;
  float: left;
  background: GREEN;
}

#column-center img {
  margin: 0 auto;
}

Answer 2

如您所说，使用text-align: center; 将列的所有内容居中。如果您不希望列的其余内容居中，则可能需要使用此属性将图像包装在 div 中。