調整圖像大小並在容器內水平和垂直居中

我正在實施帶圖像的傳送帶。旋轉木馬是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

調整圖像大小並在容器內水平和垂直居中

回答

相關問題