左の浮動小数点を中央の要素と組み合わせる

Question

divの第2要素の中心を、最初の要素の幅を知らなくてもどのようにすることができますか。

"foo"を左側に浮動させ、 "bar"を元のdivの中央に配置します。

<div> 
    <span style="float:left;">foo</span> 
    <span style="margin-left:-10px;">bar</span> 
</div> 

これを行うための別の方法があり、マージン、左のセットなしの静的な幅に：私は「foo」というの幅を知っていれば、私はこれを行うことができますか？

Answer 1

Center of the parent div?

<div> 
    <span id="f"> foo foo foo foo foo foo foo foo </span> 
    <span id="c">bar</span> 
</div> 

CSS：

#f{ 
    float:left; 
} 
#c{ 
    display:block; 
    margin: 0 auto; 
    width:100px; 
} 

Answer 2

2番目の要素のmargin-leftを50％に設定してみてください。

ここでは例です： http://jsfiddle.net/6fMve/

Answer 3

私はあなたがこれをしたいと思う理由として少し混乱しているが、ここで：http://jsfiddle.net/Wexcode/jL87v/

<div> 
    <span class="foo">foo</span> 
    <span class="bar">bar</span> 
</div> 

CSS：

.foo { float: left; } 
.bar { 
    text-align: center; 
    margin: 0 auto; 
    display: block; } 

Answer 4

あなたはこのように書くことができます。

CSS

.parent{ 
    text-align:center; 
} 
.child1,.child2{ 
    text-align:left; 
} 
.child1{ 
    float:left; 
} 
.child2{ 
    vertical-align:top; 
    display:inline-block; 
    *display:inline;/* For IE7 */ 
    *zoom:1;/* For IE7 */ 
    border:1px solid red; 
} 

HTML

<div class="parent"> 
    <span class="child1">foo</span> 
    <span class="child2">bar</span> 
</div> 

これをチェックするhttp://jsfiddle.net/6fMve/1/