如何在一個div中集中塊級鏈接

這看起來很簡單，但由於某種原因，我正在爲此苦苦掙扎。我有一些控制jQuery內容滑塊的鏈接。鏈接需要居中在滑塊的底部。鏈接的文本是通過我使用的jQuery插件設置的，所以我只是使用text-indent: -9999px來隱藏它並顯示背景圖片。每個鏈接都設置爲阻止，並且寬度和寬度均爲10px。但是我不能讓它們在div內居中。這是我想要做的一些小圖。如何在一個div中集中塊級鏈接

| ••• |

3個項目符號代表我想要居中的鏈接。無論我有2個鏈接還是10個鏈接，我都希望它們居中。如果我有一定數量的鏈接，這可能會容易很多，因爲我可以創建一個固定寬度的父級，並使用其上的margin:0 auto;。

這裏是我到目前爲止的代碼...

HTML ..

<div id="pager"> 
    <a href="#slide1">1</a> 
    <a href="#slide2">2</a> 
    <a href="#slide3">3</a> 
</div>

CSS ..

#pager {float:left; width:100%; display: block; text-align: center;} 

#pager a {display:block; width:10px; height:10px; float:left; background-image: url(img/pager-off.gif); text-indent: -9999px; background-color: red; background-repeat: no-repeat;}

來源

2012-04-20 Dustin

退房此的jsfiddle

http://jsfiddle.net/h2r6c/

我給鏈接添加了一個邊距，只是看看他們開始和結束的位置。除此之外，擺脫你的鏈接CSS中的float:left，你很好，只要它們不是塊級。他們需要是display:inline-block像你想要的那樣並排。

來源

2012-04-20 19:33:55

如果以居中爲中心，則意味着每個居中集中在容器中間，因此堆疊在另一個之上，不會浮動。關鍵是保證金：汽車

#pager a { 
    display:block; 
    width:10px; height:10px; 
    margin:auto 
    background-image: url(img/pager-off.gif); 
    background-color: red; 
    background-repeat: no-repeat; 
}

但是，如果你的意思是每個環節都並排側，它們都集中在集裝箱的中間一組，然後使用顯示：內聯 - 鏈接上的文本對齊：容器上的中心：

#pager a { 
    display:inline-block; 
    width:10px; height:10px; 
    background-image: url(img/pager-off.gif); 
    background-color: red; 
    background-repeat: no-repeat; 
} 
#pager{ 
    text-align:center;

來源

2012-04-20 19:34:05 Faust

我想要這個嗎？

http://jsfiddle.net/oswaldoacauan/phXvv/

來源

2012-04-20 19:35:35

如何在一個div中集中塊級鏈接

回答

相關問題