table 的文本在有两行或多行文本时居中，但在有一行时不居中？

Question

好吧，我必须说我是一个使用表格的新手所以如果这太明显请原谅我，但对我来说这似乎非常奇怪。

我在 <p> 中有一些文本，由于某些奇怪的原因，当调整 window 的大小时文本只有一行时，整个文本会粘在左侧。但是当 window 调整大小时，文本不止一行，整个内容就会按照我想要的方式居中（完全居中在页面中）。你可以看一个例子 here.

#taskText {
  text-align: center;
  display: table;
  vertical-align: middle;
  height: auto;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  font-size: 55px;
}

<p class='text' id='taskText'>Lorem ipsum dolor sit amet.</p>

我正在使用 css 表，但我对它们的使用经验不足，所以它可能非常明显，但我真的没有看到它。

怎么了？另外，有没有更好的方法来将这样的文本居中？谢谢。

Answer 1

而不是使用

width: auto;

你可以使用

width: 100%;

在任何情况下都使文本居中（单行和多行）。这是 updated JSFiddle

之所以有效，是因为当您使用 width: auto; 时，p 元素只占用它需要的 space。文本在框中居中，但框在页面上不居中。

当您使用 width: 100% 时，框总是占满宽度，因此文本正确居中。

您可以在 this JSFiddle

中查看单行文本和多行文本的这些方法之间的区别

table 的文本在有两行或多行文本时居中，但在有一行时不居中？

Text of a table centered when it has two or more lines of text, but not centered when it's one?

html

css

css-tables