試圖對齊twitter引導中的三個圖像2.3.2行/跨度

我想對齊所有三個圖像，使它們均勻地居中在行中。試圖對齊twitter引導中的三個圖像2.3.2行/跨度

這裏是標記的小提琴，http://jsfiddle.net/bkmorse/btCRk

<div class="container" 
    <div class="row" style="border:1px solid red;"> 
     <div class="span12"> 
      <a href="" class="share-icon facebook" title="Share on facebook">share on facebook</a> 
      <a href="" class="share-icon twitter" title="Share on twitter">share on twitter</a> 
      <a href="" class="share-icon email" title="Share in an email">send an email</a> 
     </div> 
    </div> 
</div>

a.share-icon { 
    height:64px; 
    display: inline-block; 
    width:64px; 
    text-decoration: none; 
    text-indent: -10000px; 
    font-size: 0px; 
    line-height: 0px; 
} 

a.share-icon.facebook { 
    background: #fff url('http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg') no-repeat; 
} 
a.share-icon.twitter { 
    background: #fff url('http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg') no-repeat; 
} 
a.share-icon.email { 
    background: #fff url('http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg') no-repeat; 
}

我已經嘗試文本對齊：中心;我試過拉左/右。我沒有任何運氣。任何幫助表示讚賞。

謝謝！

來源

2013-07-31 Brad

文本對齊：中心.span12應該做的伎倆，看到這個更新版本的http：/ /jsfiddle.net/btCRk/6/ – Valentin

text-align：center不能用於居中塊元素，只有內聯元素。你使用Twitter的引導考慮，這裏有2種方式，你可以這樣做：

選項1 - 使用span4s然後鏈接顯示爲固定寬度和備用塊：0汽車

<div class="container"> 
    <div class="row" style="border:1px solid red;"> 
     <div class="span4"> 
      <a href="" class="share-icon facebook" title="Share on facebook">share on facebook</a> 
     </div> 
     <div class="span4"> 
      <a href="" class="share-icon twitter" title="Share on twitter">share on twitter</a> 
     </div> 
     <div class="span4"> 
      <a href="" class="share-icon email" title="Share in an email">send an email</a> 
     </div> 
    </div> 
</div> 

a.share-icon { 
    height:64px; 
    display: block; 
    width:64px; 
    margin: 0 auto; 
    text-decoration: none; 
    text-indent: -10000px; 
    font-size: 0px; 
    line-height: 0px; } 

a.share-icon.facebook { background: #fff url('http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg') no-repeat; } 
a.share-icon.twitter { background: #fff url('http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg') no-repeat; } 
a.share-icon.email { background: #fff url('http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg') no-repeat; }

選項2 - 放鏈接中的圖像，然後把它們都內嵌式地顯示和使用文本對齊：中心

<div class="container"> 
    <div class="row" style="border:1px solid red; text-align:center;"> 
     <div class="span12"> 
      <a href="" class="share-icon facebook" title="Share on facebook"> 
       <img src="http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg" alt="" /> 
      </a> 
      <a href="" class="share-icon twitter" title="Share on twitter"> 
       <img src="http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg" alt="" /> 
      </a> 
      <a href="" class="share-icon email" title="Share in an email"> 
       <img src="http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg" alt="" /> 
      </a> 
     </div> 
    </div> 
</div>

UPDATE：我很抱歉，我沒有明確的，因爲我是應該的，連接是最終的結果，我想和我我試圖在320像素寬度的視圖（移動）完成這一點，謝謝。 enter image description here

來源

2013-07-31 14:43:07 Coop

另一種方法是使用列表。將鏈接和圖像放在列表元素中，然後浮動li的左側，並在ul上設置display：table和margin：0 auto。你需要清除ul上的li。 – Coop

我不知道我明白你的意思，或者你爲什麼編輯我的答案，而不是評論！如果您使用的是Twitter Bootstrap，那麼連續使用3個span4 div就可以實現這一點，正如我的答案中所建議的那樣。 – Coop

或者，你可以使用text-center類..

<div class="container"> 
    <div class="row" style="border:1px solid red;"> 
     <div class="span12 text-center"> 
      <a href="" class="share-icon facebook" title="Share on facebook">share on facebook</a> 
      <a href="" class="share-icon twitter" title="Share on twitter">share on twitter</a> 
      <a href="" class="share-icon email" title="Share in an email">send an email</a> 
     </div> 
    </div> 
</div>

演示：http://bootply.com/70873

來源

2013-07-31 14:57:16 ZimSystem

試圖對齊twitter引導中的三個圖像2.3.2行/跨度

回答

相關問題