Image not aligning to center in a left aligned div

Question

Below is my code :

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

I am trying this code but my image is not aligned to center its always aligned to left in left footer and to right in right footer. Please suggest !

Answer 1

I would approach the layout like this:

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

Make sure you strip all styling (eg - align, etc) out of your HTML and put it in your CSS.

Answer 2

试试这种风格：

#footer > div{width:50%}

Answer 3

your div#left_footer and div#right_footer need to have some width, in order to display the content in the middle

change your corresponding css to this:

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

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

}

see this fiddle