将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中的某些项目居中

回答

相关问题