DIV中的中心對齊圖像

雖然之前詢問過這個問題，但我的問題卻有點不同。我有一個div，其中我有兩個圖像。第一個圖像需要保持左對齊，第二個圖像需要居中對齊。 div沒有固定的寬度，因此它覆蓋了標題。我創建了一個小提琴，可以找到here。DIV中的中心對齊圖像

任何建議對我都很有幫助。

來源

2012-09-24 Tapas Bose

你需要他們在同一直線上，是嗎？ – F0G

@loler，是在同一行上。 –

案例1

添加text-align:center到div類。

通過使用僞類，這樣你的第二個形象會中心對齊div和第一圖像將被左對齊給float:left第一圖像。

這裏爲演示http://jsfiddle.net/Eevpc/5/

案例2

通過position:absolute

.brandLogo { 
    margin: 15px; background-color:red; text-align:center; position:relative; 
} 

a img:first-child { 
    border: 0 none; position: absolute; left:0; 
    height: auto; 
    vertical-align: middle; 
} 
img { 
    border: 0 none; margin:0 auto !important; 
    height: auto; 
    vertical-align: middle; 
}

演示http://jsfiddle.net/Eevpc/11/

做，在情況1中，第二圖像是中心爲剩餘的寬度的div（忽略佔用的空間）第一張圖片）。

在情況2中，第二圖像被對準到原來的div寬度的正中心。

來源

2012-09-24 10:50:41 Sowmya

非常感謝。我遵循http://jsfiddle.net/Eevpc/5/中描述的方式。它解決了。 –

你歡迎... \ – Sowmya

試試這個：

<div id="main" style="text-align:center; width:100%;"> 
    <div id="left" style="float:left;"> 
    <img src="..." alt="..."/> 
    </div> 
    <div id="right" style="float:right; width:100%; text-align:center;"> 
    <img src="..." alt="..." style="margin:0 auto;" /> 
    </div> 
    <div style="clear:both; content:'.'; display:none" /> 
</div>

來源

2012-09-24 10:56:14 adripanico

希望這會工作。

.div_class{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

感謝

來源

2015-03-27 08:31:21 Amjith

DIV中的中心對齊圖像

回答

相關問題