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

【问题标题】：Resize images, and center horizontally and vertically within container调整图像大小，并在容器内水平和垂直居中
【发布时间】：2013-03-19 13:32:22
【问题描述】：

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

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

经过数小时的修改，并使用center 标签，我设法构建了我上面描述的内容。请看小提琴here。

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

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

【问题讨论】：

标签： html css image

【解决方案1】：

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

或者middle或者bottom...

嗯？为什么我在这件事上被否决了？

http://jsfiddle.net/y2KV7/

【讨论】：

你能提供一个小提琴吗？

【解决方案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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

什么？你知道“纵横比”是什么意思吗？