在DIV中居中對齊圖像

Question

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

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

Answer 1

情況1

將text-align:center添加到div類。

使用偽類給float:left第一個圖像，這樣第二個圖像將與div居中對齊，第一個圖像將保持對齊。

這是演示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寬度的精確中心對齊。

Answer 2

希望這會奏效。

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

謝謝

Answer 3

嘗試這個：

<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>