Bir div içindeki bir yayılma öğesini nasıl yatay olarak ortalayabilirim

Çevreleyen div içinde 'web sitesini görüntüle' ve 'projeyi görüntüle' bağlantısını ortalamaya çalışıyorum. Birisi bunun işe yaraması için ne yapmam gerektiğini söyleyebilir mi?

JS Fiddle: 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
}

Bir seçenek, <a>bir görüntü vermek inline-blockve ardından text-align: center;içeren bloğa uygulamaktır (şamandırayı da kaldırın):

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/

başka bir seçenek de aralığı vermek display:table;ve onu ortalamaktır.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>

Merkezlenecek inline-blocköğeye uygulamak text-align:centerve ana bloğa uygulamak benim için hile yaptı.

<span>Etiketlerde bile çalışır .

Aralıklarla başa çıkmak biraz zor olabilir. Öğretme aralığının genişliğini ayarlarsanız, kullanabilirsiniz

margin: 0 auto;

onları ortalamak için, ancak daha sonra farklı çizgilerde sona eriyorlar. Yapınıza farklı bir yaklaşım denemenizi öneririm.

İşte kafamın tepesinden çıkardığım jsfiddle : jsFiddle

DÜZENLE:

Adrift'in cevabı en kolay çözüm :)

Kemanınıza göre onları iki ayrı çizgide değil, tek bir hatta ortalamak istediğinizi varsayıyorum. Durum buysa, aşağıdaki css'yi deneyin:

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

Ortalamak istediğiniz için kayan noktayı kaldırdım ve sonra bunlara margin: 0 auto ekleyerek bağlantıları çevreleyen aralığı ortaladım. Son olarak, açıklığa statik bir genişlik ekledim. Bu, bağlantıları kırmızı div içindeki bir satırda ortalar.

yalnızca css div içeriği ortalayabilirsiniz

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

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