css - 文本对齐不适用于一段文本

Question

请看看这个页面。

如您所见，有一些“阅读更多”按钮。（翻译 - “czytaj więcej”）。这只是在摘录之后。我想将此阅读更多按钮居中。

我给了a href......以下课程：

class="readmorebtn"

这个CSS：

.readmorebtn{font-size:23px; text-align:center !important;}

但由于某些原因，它不起作用。有什么提示吗？

Answer 1

您正在a为按钮使用元素，因此默认情况下为a元素inline，因此即使您center，文本也没有居中的位置，因为inline元素不占用100%水平空间，因此为了使文本居中，您需要使其inline-block或block

.readmorebtn {
    display: block;
    font-size: 23px;
    text-align: center; /* No need of !important here */
}

---

如果您使用inline-block的元素将是inline并且同样block，您需要width为您的inline-block元素定义一些。而block水平元素将占据整个水平空间。

演示（看看如果你不把它做成块级元素怎么办）

Demo 2（使其成为block关卡元素）

Answer 2

一个元素不能有宽度，因为它是一个内联元素，没有宽度你不能对齐到中心，所以你应该添加display: inline-block; or display: block;到你的 a

.readmorebtn {
    display: block;
    font-size: 23px;
    text-align: center;
}