div内のスパン要素を水平方向にセンタリングするには

Question

2つのリンクを 'view website'と 'view project'を中心にしてdiv内に配置しようとしています。誰かが私がこの仕事をするために必要なことを指摘できますか？

JSフィドル：http://jsfiddle.net/F6R9C/

HTML

<div> 
    <span> 
    <a href="#" target="_blank">Visit website</a> 
    <a href="#">View project</a> 
    </span> 
</div> 

CSS

div { background:red;overflow:hidden } 

span a { 
    background:#222; 
    color:#fff; 
    display:block; 
    float:left; 
    margin:10px 10px 0 0; 
    padding:5px 10px 
} 

Answer 1

1つのオプションは、<a>にinline-blockの表示を与え、その後、削除（含むブロックにtext-align: center;を適用することです浮動式）：

の

div { 
    background: red; 
    overflow: hidden; 
    text-align: center; 
} 

span a { 
    background: #222; 
    color: #fff; 
    display: inline-block; 
    /* float:left; remove */ 
    margin: 10px 10px 0 0; 
    padding: 5px 10px 
} 

http://jsfiddle.net/Adrift/cePe3/

Answer 2

スパンはに対処するためのトリッキーなビットを得ることができます。ティーチスパンの幅を設定した場合、使用することができる

margin: 0 auto; 

それらを中央に配置することができますが、それらは次に異なる行になります。あなたの構造に異なるアプローチを試みることをお勧めします。

ここ

が私の頭の上をオフにしてjsfiddle IカムEまでです：jsFiddle

EDIT：

漂流者の答えが最も簡単な解決策です:)

Answer 3

私はあなたがそれらを中央にしたいと仮定しますあなたのフィドルに基づいて2つの別々の行には表示されません。その場合は、次のCSSを試してみてください。

div { background:red; 
     overflow:hidden; 
} 
span { display:block; 
     margin:0 auto; 
     width:200px; 
} 
span a { padding:5px 10px; 
     color:#fff; 
     background:#222; 
} 

は、私はあなたがそれを中央にしたいので、フロートを除去し、その後、追加のマージンを中心とリンクを囲むスパン作っ：彼らに0自動。最後に、スパンに静的な幅を追加しました。これは赤いdiv内の1つの行にリンクを集中させます。中心部：

Answer 4

別のオプションは、センタリングされるべき要素に「インラインブロック」を適用すると、テキスト整列を適用margin:0 auto;

span { 
display:table; 
margin:0 auto; 
} 

Answer 5

<div style="text-align:center"> 
    <span>Short text</span><br /> 
    <span>This is long text</span> 
</div> 

Answer 6

介しスパンdisplay:table;中心にそれを与えることであろう親のブロックは私のためのトリックでした。

<span>タグでも機能します。