html - 中心文本仅适用于简短的展开行？

Question

有没有办法让文本居中 ( text-align: center) 仅适用于短到不能换行的文本行，否则左对齐 ( text-align: left)？

标签： htmlcss

Answer 1

您可以使用 flexbox 和justify-content: center.

div {
  background-color: #e7e7e7;
  width: 200px;
}
p {
  display: flex;
  justify-content: center;
}

<div>
  <p>Short text</p>
</div>

<div>
  <p>Now this is more like a long text</p>
</div>

你可以用其他方式来做，只要你用将在另一个元素中居中的文本包装一个元素。