div内のspan要素を水平方向に中央揃えするにはどうすればよいですか

私は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
}

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/

別のオプションは、スパンを与え、display:table;それを介して中央に置くことですmargin:0 auto;

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

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

適用inline-blockセンタリングする要素に適用するとtext-align:center、親のブロックには、私のためのトリックを行いました。

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

スパンの扱いは少し難しいかもしれません。ティーチスパンの幅を設定すると、使用できます

margin: 0 auto;

それらを中央に配置しますが、それらは最終的に異なる線上に配置されます。あなたの構造に別のアプローチを試すことをお勧めします。

これが私が頭のてっぺんから出てきたjsfiddleです：jsFiddle

編集：

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

私は、フィドルに基づいて2つの別々の行ではなく、1つの行にそれらを中央に配置したいと思います。その場合は、次のcssを試してください。

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

フロートを中央に配置したいので、フロートを削除し、マージン0 autoを追加して、リンクを囲むスパンを中央に配置しました。最後に、静的な幅をスパンに追加しました。これにより、リンクが赤いdiv内の1行に配置されます。

コンテンツを中央揃えできるcss divのみ

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

http://jsfiddle.net/4q2r69te/1/