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

}

请参阅此fiddle

图像未对齐到左对齐div中的中心

3 个答案: