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

我正在实施带图像的传送带。旋转木马是960px宽，并且包含宽度960px/5 = 192px（和高度119px）的容器中的5个图像。调整图像大小并在容器内水平和垂直居中

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

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

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

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

来源

2013-03-28 Randomblue

你可以添加vertical-align:top;您#carousel-images .image{} CSS

或者middle或bottom ...

呃？为什么我会对此低调？

http://jsfiddle.net/y2KV7/

来源

2013-03-28 22:29:13 romo

你能提供一个小提琴吗？ – Randomblue

图像不是垂直居中... http://jsfiddle.net/M8rja/ – Randomblue

-2

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

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

像边距：5px自动;将水平居中集装箱。

来源

2013-03-28 22:34:54 Peng

http://jsfiddle.net/hfX2h/2/ – Peng

您更改了宽高比... – Randomblue

然后删除图像border.http ：//jsfiddle.net/hfX2h/3/ – Peng

我把它做以下工作：

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

来源

2013-03-28 22:41:07

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

回答

相关问题