3

3 つの子 DIV を持つ親 DIV があります。1 つの DIV を左にフロートし、別の DIV を右にフロートし、3 番目の DIV を中央に配置する必要があります。

親の幅は 100% なので固定ではありません。

次のことを試しましたが、DIV が中央に配置されていません。

<html>

<head></head>

<body>

<div style="width:100%;border:1px solid #000000;height:200px;">

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:20px;float:left"></div>

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:auto;margin-right:auto;float:left;"></div>

<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
right:20px;float:right;"></div>

</div>

</body>

</html>

テスト用のフィドルを作成しました：http://jsfiddle.net/swS5x/

ありがとう

4

2 に答える 2

2

解決策の 1 つは、単純に #parent add を追加し、# text-align:center;center を削除しfloat:left;て追加することです。display:inline-block;

#parent {
    width:100%;
    border:1px solid #000000;
    height:200px;
    text-align:center;
}
#center {
    width:50px;
    height:50px;
    border:1px solid #000000;
    margin-top:75px;
    margin-right:auto;
    margin-left:auto;
    display:inline-block;
}

ディスプレイ:インラインブロック; 要素を画像と同じように動作させ、コンテナ内の中央に配置できます。

http://jsfiddle.net/swS5x/2/

于 2013-11-13T21:03:17.927 に答える
1

div可能であれば、要素を並べ替えますfloat。#center

例を見る

<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>

浮動要素はmargin: auto、左右の余白を無視します。

于 2013-11-13T21:02:39.310 に答える