Question

好的，我必须说我是一个全新的桌子工作人员如果这太明显了就原谅我，但对我来说这似乎很奇怪。

我在<p>中有一些文字，并且由于一些奇怪的原因，当调整窗口大小以使文本只有一行时，整个文本会粘在左侧。但是当调整窗口大小以使文本具有多行时，整个事物就会以我想要的方式居中（完全居中于页面中）。您可以看到示例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元素只占用它所需的空间。文本在框中居中，但框不在页面的中心。

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

您可以在this JSFiddle

中看到单行文字和多行文字的这些方法之间的差异

当一个表有两行或多行文本时，该表的文本居中，但当它是一行时却不居中？

1 个答案: