html - フローティング要素を無視しながら、親のインラインブロック div を中央に配置する

Question

インラインdivを親の中央に配置しようとしています。親要素にはdiv、右にフロートする子もあります。右揃えのため、中央揃えdivがdiv左にずれています。提供されたコードを使用して、下の画像のようにフローティングの位置/サイズに関係なく、中央の div を中央に配置したいと考えています。

.parent {
    text-align: center;
}
.parent div {
    display: inline-block;
}

<div id="parent">
    <div> ... </div>
    <div style="float:right"> ... </div>
</div>

現在の設定では、親の内側に両方の内部 div がありますが、右揃えdivを絶対位置で外側に配置するのが正しい方法だと思いますか?

また、同じページに親 div の複数のインスタンスがあります。

どうすればこの結果を達成できますか?

Answer 1

適切な div CSS を設定する

position:absolute;
right:0;

親divに相対的

#parent {
position:relative;
}

Answer 2

position:absolute唯一の方法です

デモhttp://jsfiddle.net/kevinPHPkevin/u4FWr/1/

.center {
    display:inline-block;
    position: absolute;
    left:0;
    right:0;
}

編集済み

これがすでに提案されているかどうかわからない

または、代わりabsolute: position;に権利を得ることができますdiv

デモhttp://jsfiddle.net/kevinPHPkevin/u4FWr/3/

.right {
    display:inline-block;
    position: absolute;
    right:0;
}