浮動小数点属性の中央スパン要素

Question

私はスパンの要素を浮動させて中央に配置したいと考えています。 画面の幅がスパンの幅より小さいときに消えないように、スパンをフローティングにする必要があります。フローティングにすると、画面が縮小するにつれて次の行に1つずつジャンプします。私は私が3フロートdivsを使用してセンターすることができると思うが、これを行うと何かの固定幅を設定せずに簡単な方法があるのだろうかと思っていた。

display:inline-blockをスパンに適用することはできません。 text-align: centerが継承されます。

HTML

<div style="text-align: center; margin-bottom: 20px;"> 
    <div style="float:left;"> 
     <span style="float:left">FOO</span><span style="float:left">BAR</span> 
    </div> 
</div> 

EDIT：JSFiddleはそれを説明する：https://jsfiddle.net/5yyhdpf1/

Answer 1

スパン要素は、デフォルトではインラインあり、親にtext-align: centerを追加すると、あなたが必要とするすべてである、なぜあなたはそれを複雑にしていますか？浮動小数点のポイントは何ですか？

<div style="text-align: center; margin-bottom: 20px;"> 
 
    <span>FOO</span><span>BAR</span> 
 
</div>

浮動センターのようなものではなく、あなたが中央のブロックレベル要素にmargin: autoを使用する必要がありませんが。

Answer 2

は、CSS-部/ スパン{幅

<!--html-part--> 
<div style="float:left"> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left"></span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left"></span> 
    <span style="float:left">FLOATEDSPAN</span> 
    <span style="float:left">FLOATEDSPAN</span> 
    </div> 
    <br> 
    <br> 
    <br> 
    <span>NONFLOATED</span> 
    <span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span><span>NONFLOATED</span> 

/、これを試して、これを試してください：300ピクセル。 text-align：center; float：left;}

Answer 3

インラインブロックアトリビュートを含まないすべてのスパン要素に属性を設定すると、そのように動作します。 "text-align：center"を親divに設定する必要があります。

<div style="text-align: center"> 
    <span style="display: inline-block">FOO</span><span style="display: inline-block">BAR</span> 
</div>