0

我已经浏览了这里的帖子，但似乎找不到想要工作的解决方案，我想知道我的 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 尺寸，横向或纵向，两者高度相同但宽度不同，我需要将每个图像置于其列的中心。左右列将与最宽的图像相同，就像风景照片一样，它们看起来总是左对齐和右对齐，如果肖像出现在这些列的中心。然后中心列将占据其余空间，这将使所有图像居中，从而使左右边框相等。并使它们整洁。

我可以按照看起来在网络上的方式设置列，因为我可能无法将图像居中。

4

2 回答 2

1

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

这意味着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;
}
于 2013-04-01T00:06:59.973 回答
0

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

于 2013-03-31T23:47:26.740 回答