Question

我在这里看过帖子，但似乎无法找到想要工作的解决方案，我想知道我的浮动：左标签是否导致问题。

基本上我有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在您的情况下不起作用，因此它必须意味着您的图像不再是内联元素。 Probaby在你的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中。

在使用float的css三列设置中：左边如何在每列内部水平居中图像

2 个答案: