1

以下は私のコードです：

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

このコードを試していますが、画像が中央に配置されていません。常に左フッターで左に、右フッターで右に配置されています。提案してください ！

4

3 に答える 3

3

私は次のようなレイアウトにアプローチします：

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 からすべてのスタイリング (例: align など) を取り除いて、CSS に入れるようにしてください。

于 2013-04-16T16:57:24.043 に答える
0

このスタイルを試してください:

#footer > div{width:50%}
于 2013-04-16T17:00:50.560 に答える
0

コンテンツを中央に表示するdiv#left_footerにdiv#right_footerは、ある程度の幅が必要です

対応する css を次のように変更します。

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

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

}

このフィドルを参照してください

于 2013-04-16T17:01:53.960 に答える