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

Question

请查看this page。

正如您所看到的，有一些“阅读更多”按钮。 （翻译 - “czytajwię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（如果你没有把它作为块级元素，请参阅下面的内容）

Demo 2（将其设为block级元素）

Answer 2

元素不能具有宽度，因为它是内联元素且没有宽度，您无法与中心对齐，因此您应该将display: inline-block; or display: block;添加到a​​

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