css - 在 css 三列设置中使用 float :left how do I horizontally centre an image inside each column

Question

我已经查看了此处的帖子，但似乎无法找到想要工作的解决方案，我想知道是否是我的 float:left 标签导致了这个问题。

基本上我有 wordpress 博客 我正在尝试使用 nextgen gallery 来设置我想要做的事情 我需要修改它显示图像列表的方式。分为三个部分。在列中将每个图像居中。现在我已经使用下面的代码设置了它，它在这个非常基本的下面创建了三列，但它在这里不起作用我假设我可以使用 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;
}