html - 在 div 中居中一些元素

Question

我在导航部分居中时遇到一点问题。这是标记结构:

<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 包装在一个 div 中，并使用 margin: 0 auto; 居中；但标记结构无法更改，因为 Javascript 需要这种确切的结构。

使用上面的 CSS，page_items 应该居中，但是 text-indent: -9999px;不起作用，所以文本仍然存在(我不想要)。关于如何摆脱文本但保留链接和居中的任何想法？

Answer 1

您的 CSS 中 page_item 之前似乎缺少一个点。

这意味着 CSS 目标 #pagination_navigation page_item 对任何元素都没有影响。

你想要的是:

#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/