css宽度适合内容取消文本居中对齐

Question

我试着居中一个pragraph，并给它一个低不透明度的背景，使其更容易在主要背景上阅读。我使用

background-color: rgba(255, 255, 255, 0.2);
background-blend-mode: lighten

但当我添加

width: fit-content;

它会将文本推到屏幕的右侧，并忽略文本对齐。

background-color: rgba(255, 255, 255, 0.2);
background-blend-mode: lighten;
width: fit-content;

Answer 1

从你包含的信息中不可能确切地说出发生了什么，但这里有一个猜测：

width: fit-content使元素成为包含其内容所需的最小大小。我的猜测是，您的文本仍然在<p>中居中，但是<p>本身并不占用可用的宽度。

可以通过向元素添加边框来查看这一点。

如果希望在可用空间内居中放置<p>本身，可以使用auto作为水平边距。

下面的代码片段演示了我怀疑正在发生的事情。在所有3个段落中，文本居中对齐，但除非文本换行，否则无法分辨。

我在下面的文本中添加了换行符，以显示文本居中，但段落本身不居中。

​

p {
  border: 1px solid tomato;
  text-align: center;
}

.fit {
  width: fit-content;
}

.margins {
  margin: 0 auto;
}

<div id="container">
  <p>A paragraph without<br/>fit-content</p>
  <p class="fit">A paragraph with<br/>fit-content</p>
  <p class="fit margins">A paragraph with</br>fit-content and margin: 0 auto</p>
</div>

​

Answer 2

使用

width: fit-content;
margin: auto;

同时执行和居中文本的操作