將div中的某些項目居中

我的導航部分居中有點問題。這裏的標記結構：將div中的某些項目居中

<div id="pagination_navigation"> 
    <a href="#" class="first">First</a> 
    <a href="#" class="page_item">1</a> 
    <a href="#" class="page_item active_item">2</a> 
    <a href="#" class="last">Last</a> 
</div>

而這裏的相關CSS：

#pagination_navigation { 
    text-align: center; 
} 
#pagination_navigation .first { 
    float: left; 
} 
#pagination_navigation .last { 
    float:right; 
} 
#pagination_navigation .page_item { 
    display: inline; 
    width: 6px; 
    height: 10px; 
    text-indent: -9999px; 
    white-space: nowrap; 
    background: url(fancyimage.png) no-repeat; 
}

基本上我希望所有的page_items相互之間的小幅度居中，而第一和最後一個環節應該是在他們各自的方面。起初，我打算將所有page_items封裝在使用margin的div和center中：0 auto;但標記結構不能改變，因爲Javascript期望這個確切的結構。

對於上面看到的CSS，page_items是應該居中的，但是文本縮進：-9999px;不起作用，所以文字仍然存在（我不想）。任何想法如何我可以擺脫文本，但保持鏈接和居中？

來源

2011-07-07 Tommy Brunn

您的CSS似乎在page_item之前缺少一個點。

這意味着目標#pagination_navigation page_item的CSS對任何元素都沒有影響。

你想要的是：

#pagination_navigation .page_item { 
    display: inline; 
    width: 6px; 
    height: 10px; 
    text-indent: -9999px; 
    white-space: nowrap; 
    background: url(fancyimage.png) no-repeat; 
}

page_item前的點表示你指的類名。如果沒有這個點，你就是指名稱爲page_item的元素。

另外，您不能在聯機級別元素上使用text-indent。將其更改爲inline-block將解決您的問題。

這裏有一個演示：http://jsfiddle.net/wBreU/1/

來源

2011-07-07 13:49:16

當我寫我的文章時，丟失的點只是一個錯字。在實際的代碼中，點在那裏。更改爲內聯塊似乎已經完成了這個訣竅！ –

好啊。我只是在吞併，我也發佈了一個快速演示。 –

改變這一行：

#pagination_navigation page_item {

要這樣：

#pagination_navigation .page_item {

，事情應該開始工作更好！

您也可以使用「display：inline-block;」而不是「顯示：內嵌」。它應該是你需要的。

來源

2011-07-07 13:53:35

還有他的鏈接內聯levelso的問題，文本縮進不會按他的意圖工作。而且，真的，我的4分鐘後的答案是相同的？ :-) –

@Jamie：當我開始打字時，我沒有看到你的答案。但我注意到，您將我的「內嵌塊」建議拉入您的答案！ :) –

哈哈touche。我沒有看到你的內聯塊答案，直到我更新之後:-)好吧，+1是一個很好的運動:) –

將div中的某些項目居中

回答

相關問題