html - 右对齐内部父级

Question

我想将换行文本右对齐到 p 的右侧。

这是我当前代码的简化版本：

p {
  text-align: center
}

span {
  text-align: right
}

<p>
  lorem ipsum lorem ipsum lorem ipsum
  <br />
  <span>-author</span>
</p>

但我的跨度仍然居中。如果我使用float: right它在右边，但它不与 p 标签的最后一个字符内联。设置 amax-width并不理想，因为lorem ipsum它可以是任意长度。

这是一个 jsfiddle 当前：https ://jsfiddle.net/dxgs3u41/

如何将跨度与 p 的最后一个字符右对齐？

标签： htmlcss

Answer 1

使用inline-blockelement 使容器宽度成为内容宽度，您可以将整个容器居中，然后将其中的文本居中。

div {
  text-align: center
}
div > p {
  display:inline-block;
  text-align: right
}

<div>
  <p>lorem ipsum lorem ipsum lorem ipsum
  <br>
  <span>-author</span>
  </p>
</div>

<div>
  <p>lorem ipsum lorem ipsum
  <br>
  <span>-author</span>
  </p>
</div>