text-align：中心沒有居中定位標記

下面是HTML文件：

<div class="body_div"> 
    <div class="verticle_center"> 

    <div id="links"> 
     ... 
     <div id="linkedin" class="fill"> 
     <a href="#">linkedin</a> 
     </div> 
     ... 
    </div> 

    </div> 
</div>

這裏是css.scss：

.body_div { 
    display: table; 
    height: 100%; 
    overflow: hidden; 
    margin: 0 auto; 

    .verticle_center{ 
    display: table-cell; 
    vertical-align: middle; 
    padding: 0 5px; 
    } 
    #linkedin { 
    text-align: center; 
    color: rgba(26, 132, 188, 1); 
    box-shadow: inset 0 -2px 0 rgba(26, 132, 188, 1); 
    display: inline; 
    margin: 10px 7px; 
    padding: 5px 5px; 
    font-weight: 700; 
    font-size: 15px; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    background: none; 
    z-index: 1; 
    cursor: pointer; 
    transition:   0.19s ease-in; 
    -o-transition:  0.19s ease-in; 
    -ms-transition:  0.19s ease-in; 
    -moz-transition: 0.19s ease-in; 
    -webkit-transition: 0.19s ease-in; 
    } 

}

但正如在這裏看到，中藍色顯示的區域還有空間的權利和我希望它被集中。

爲什麼#linkedin{}內text-align: center;不定心錨標記，如何實現這樣的效果？

我試圖添加另一個<div class="center">和單獨<p>圍繞錨標記和錨標記內沒有成功。圖像（所有這些試驗中）結束這樣看：

enter image description here

來源

2014-06-13 stecd

也許LinkedIn旁邊有一個空間。你能證實沒有空間嗎？ –

@ j08691我已經刪除了嵌入的ruby代碼，並將其替換爲呈現的HTML。 – stecd

@NawedKhan Linkedin旁邊沒有空間。如果你看看所有其他鏈接（投資組合，Github和博客），你會發現它們也沒有居中，似乎與左邊對齊。 – stecd

當您申請display:inline你#linkedin DIV，你告訴它來覆蓋一個div正常display:block行爲，基本上把它變成跨度。內聯元素的容器縮小以適應元素，所以居中將不起作用。

如果您想要鏈接並排並居中在其容器中，請使用display:inline-block。

來源

2014-06-13 15:35:20 Sam

很棒的建議！該解決方案几乎可行，但每個鏈接右側仍有（非常小的）空間。 [查看此處]（http://imgur.com/OYB1TUB）。 – stecd

'display：inline-block'應該摺疊元素之間的空白。您很有可能在鏈接上設置了空白。對於'＃linkedin'，您左右兩邊有7px的餘量。 – Sam

'display：inline-block'已經摺疊了空格。不過，正如你可以在[這個小提琴]中看到的那樣（http://jsfiddle.net/stecd/BvcP7/），在'N'旁邊有一個小空間。刪除邊距並不會影響該空白區域。我甚至認爲這個問題可能與字體有關，但即使在改變字體之後，鏈接之後的那個小空間仍然存在。我非常謹慎，但我不確定這是否是css/html問題。 – stecd

text-align：中心沒有居中定位標記

回答

相關問題