文字对齐：右；不醒

Question

这是我的代码。我已将其最小化。因为text-align:right;无法正常工作

.forgot {
  color: red;
  text-align: right;
}

<div class="content">
  <center>
    <h3><u>LOREM IPSUM</u></h3><br>
    <button class="btn btn-primary">Login as Guest</button>
  </center>
  <br>
  <a href="#" class="forgot">Forgot details?</a>
</div>

Answer 1

正如@TreyBake指出的，不应使用center和u，而应使用text-align和em。

此外，这是将right align设置为parent的解决方案。

.forgot {
  color: red;
}

.center-aligned{
text-align: center;
}

.right-aligned{
text-align: right;
}

<div class="content">
  <div class="center-aligned">
    <h3><em>LOREM IPSUM</em></h3><br>
    <button class="btn btn-primary">Login as Guest</button>
  </div>
  <br>
  <div class="right-aligned">
  <a href="#" class="forgot">Forgot details?</a>
  </div>
</div>

Answer 2

在父元素上设置align。不在元素本身上。

.forgot {
  color: red;
}

.content {
  text-align: right;
}

<div class="content">
  <center>
    <h3><u>LOREM IPSUM</u></h3><br>
    <button class="btn btn-primary">Login as Guest</button>
  </center>
  <br>
  <a href="#" class="forgot">Forgot details?</a>
</div>

Answer 3

这就是为什么它不对齐

您有<a class="forgot">元素，其中带有“忘记详细信息”文本。由于它是<a>元素，因此默认情况下它将仅拉伸到与您放置在其中的文本一样宽的宽度。因此，如您在下面的屏幕快照中所见，您的<a class="forgot">元素（突出显示）仅与“忘记详细信息”文本一样宽。因此，您的"text-align: right;"从技术上来说是 将文本向右对齐，但是由于父容器（<a class="forgot">元素）仅与文本一样宽，因此水平对齐不会有所作为。

如何修复

在<a>元素仅拉伸以适合其内容的情况下，<div>元素默认水平拉伸以填充其父容器。因此，您可以做的是将<a class="forgot">括在<div class="forgot-parent">中，然后将"text-align: right"应用于<div class="forgot-parent">，以使<a class="forgot">对齐到右侧

所以代码将如下所示：

.forgot {
  color: red;
}
.forgot-parent {
  text-align: right;
}

<div class="content">
  <center>
    <h3><u>LOREM IPSUM</u></h3><br>
    <button class="btn btn-primary">Login as Guest</button>
  </center>
  <br>
  <div class="forgot-parent">
    <a href="#" class="forgot">Forgot details?</a>
  </div>
</div>

请注意如何从"text-align: right;"中删除'.forgot'并将其添加到'.forgot-parent'。结果如下所示。首先，这是父级<a class="forgot-parent"> div高亮。

请注意<div class="forgot-parent">是如何伸展到整个屏幕宽度的。接下来<a class="forgot">高亮显示：

请注意，<a class="forgot">仍然只是其内容的宽度（“忘记详细信息”文本），但是现在在其父div的右侧对齐。

Answer 4

您可以在父元素上使用text-align: right。创建一个div，包装您的链接，然后给他上课。请参见下面的示例：

html：

<div class="content">
  <center>
    <h3><u>LOREM IPSUM</u></h3><br>
    <button class="btn btn-primary">Login as Guest</button>
  </center>
  <br>
  <div class="text-right">
    <a href="#" class="forgot">Forgot details?</a>
  </div>
</div>

css：

.forgot {
  color: red;
}

.text-right {
  text-align: right;
}

如果安装了Bootstrap，则可以在不使用CSS的情况下完成所有这些操作。您的html如下所示：

<div class="content">
  <center>
    <h3><u>LOREM IPSUM</u></h3><br>
    <button class="btn btn-primary">Login as Guest</button>
  </center>
  <br>
  <div class="text-right">
   <a href="#" class="text-danger">Forgot details?</a>
  </div>
</div>

在撰写本文时，请注意，这是Bootstrap v4.2.1