Question

我正在实施带图像的旋转木马。转盘宽960像素，包含宽度960像素/ 5 = 192像素（高度119像素）的容器中的5张图像。

我希望图像在容器内尽可能大，而不改变图像的纵横比。我还希望图像在其容器内水平和垂直居中。

通过黑客攻击数小时，并使用center标记，我设法构建了上面描述的内容。请查看小提琴here。

问题在于第二张图像的容器（如黑色边框所示）。当第二个图像水平居中时，容器会向下移动一点。

我正在尝试在图像上实现叠加，并且需要容器都处于相同的高度。我怎样才能将容器放在同一高度？是否有更好/更清洁的方法不使用center标签？

Answer 1

您可以将vertical-align:top;添加到#carousel-images .image{} css

或middle或bottom ...

呃？为什么我会对此投降呢？

http://jsfiddle.net/y2KV7/

Answer 2

我通过以下方式让它发挥作用：

<强> HTML：

<div id="wrapper">
 <div id="carousel-images">
  <img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
  <img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
  <img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
  <img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
  <img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
 </div>
</div>

<强> CSS：

#wrapper 
{ 
 width: 100%; 
 text-align: center; 
 background: blue; 
}

#carousel-images 
{
 width: 960px;
 white-space: nowrap;
 font-size: 0;
 margin: 0 auto;
}

#carousel-images img 
{
 display: inline;
 max-width: 192px;
 max-height: 119px;
 border: 1px solid black;
 vertical-align: middle;
}

的 Click here to view working jsFiddle demo 的

Answer 3

首先，不要让世界回归到10年前。不要使用标签进行格式化。我还建议你阅读div和span之间的不同以及display属性。您可以轻松找到有关http://www.w3schools.com的信息。

如果你想要一个中心容器。你可以使用css margin auto trick。

像边缘一样：5px auto;将容器水平居中。

调整图像大小，并在容器内水平和垂直居中

3 个答案: