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

Question

我正在实现一个带有图像的轮播。轮播宽 960 像素，包含 5 张图像，容器的宽度为 960 像素/5 = 192 像素（高度为 119 像素）。

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

通过研究几个小时并使用center标签，我设法构建了我上面描述的内容。请看这里的小提琴。

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

我正在尝试在图像上实现叠加，并且需要容器都处于相同的高度。我怎样才能让容器都处于相同的高度？有没有更好/更清洁的方法不使用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;
}

单击此处查看工作中的 jsFiddle 演示

Answer 3

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

如果你想要一个中心容器。你可以使用 CSS 边距自动技巧。

像margin:5px auto; 将容器水平居中。