Question

在“类别”页面中，我需要将链接居中对齐＆＃34;继续阅读...＆＃34;。我尝试了几种方法，但没有一种方法可以正常工作。

这是页面上的HTML：

<a class="more-link">Continue reading <span class="screen-reader-text">description</span> <span class="meta-nav">→</span></a>

我已经尝试了以下CSS代码，但没有一个能够正常工作：

.more-link {
  margin-right: auto;
  margin-left: auto;
}

.more-link {
    display: block;
    margin: 0 auto;
}

.more-link {
    text-align: center;
}

将链接居中对齐的正确CSS代码是什么？

Answer 1

将div中的链接换行并将text-align: center应用于div，或将div的align属性设置为＆＃34; center＆＃34;。

样品：
Link 1
Link 2

Answer 2

在“继续阅读”之后直接，缺少[/span]。这可能已经有所帮助了。

但是，这是一个<span>标记，它是一个“内联元素”，这意味着它将与常规文本流一起使用。

如果你想集中某些东西，首先它必须是一个块元素，比如<div>标记。使用你的设置display: block;你确实把它变成了一个块元素，但这仍然有问题，因为整个事情可能在另一个内联元素中，比如<p>。因此，为了能够使它居中，您至少需要将它放在一个单独的块元素（p或div）中，独立于任何其他文本。

居中对齐链接

2 个答案: