圖像未對齊到左對齊div中的中心

Question

以下是我的代碼：

<div id="footer">
<div id="left_footer">
<div id="img_left" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
<div id="right_footer">
<div id="img_right" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
</div

CSS：

#footer {
    width:500px;
    position:relative
}
#left_footer{
    float:left;
}
#right_footer{
    float:right;
}

我正在嘗試這個代碼，但是我的圖像沒有對齊到中心，它始終在左側頁腳左側對齊，右側右側對齊。 請指教！

Answer 1

我會像這樣接近布局：

http://jsfiddle.net/yWmZ5/1/

HTML

<div id="footer">
    <div id="left_footer">
        <img src="http://placekitten.com/100/100" />
    </div>
    <div id="right_footer">
        <img src="http://placekitten.com/100/100" />
    </div>
</div>

CSS

#footer { width:500px; position:relative; overflow:hidden; }
#left_footer{ width:250px; float:left; text-align:center; background:orange; }
#right_footer{ width:250px; float:right; text-align:center; background:yellow; }

確保從HTML中刪除所有樣式（例如 - 對齊等）並將其放入CSS中。

Answer 2

試試這種風格：

#footer > div{width:50%}

Answer 3

你的div#left_footer和div#right_footer需要有一些寬度，以便在中間顯示內容

將您對應的css更改為：

#left_footer{
    text-align:center;
    float:left;
    width:50%;

    }
#right_footer{
    float:right;
    width:50%;

}

看到這個小提琴