Bir span öğesinin yatay olarak nasıl bir div ı

Question

içine ortalarımdır İki bağlantıyı 'view web sitesini' ve 'projeyi' çevreleyen div içinde ortalamaya çalışıyorum. Birisi bu işi yapmak için ne yapmam gerektiğini işaret edebilir 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 
} 

Answer 1

Bir seçenek <a>inline-block bir görüntüsünü vermek ve sonra çıkarın (içeren blokta text-align: center; uygulamaktır aynı zamanda yüzer):

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

açıklıklar ile başa çıkmak için biraz zor alabilirsiniz. teach yayılma alanının genişliğini ayarlamak eğer bunları merkezi

margin: 0 auto; 

kullanabilirsiniz, ancak bunlar daha sonra farklı hatlarda sonunda. Yapınıza farklı bir yaklaşım denemenizi tavsiye ederim. İşte

kafamın üst kapalı ile e kam jsfiddle geçerli: jsFiddle

DÜZENLEME:

başıboş cevabı kolay çözüm :)

Answer 3

Onları ortalamak istiyorum varsayalım olduğunu tek bir çizgide ve kemanı temel alan iki ayrı çizgide değil. Bu durumda, aşağıdaki css deneyin:

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

Bunu ortalamak istiyorum çünkü şamandıra kaldırıldı ve ardından ekleyerek farkla merkezli bağlantıları çevreleyen yayılma yaptı: Onlara 0 oto. Son olarak, açıklığa statik bir genişlik ekledim. Bu, kırmızı div içindeki bir satırdaki bağlantıları ortalar.

Answer 4

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

merkezli ve metin hizalama tatbik edilecek elemanına inline-blok "uygulama yoluyla merkezi olacaktır: merkez Ebeveyn bloğu benim için hile yaptı.

<span> numaralı etiketlerde bile çalışır.