Question

我希望我的文字以40％的宽度居中。在我的最后一个代码示例中，一切都很完美，但文本看起来像<p>元素下的10px。

没有宽度40％：

<p id="pname" style="text-align:center; color:white;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">
Some really long text in here
</p>

- ＆GT;文字的宽度为40％但不居中

宽度为40％：

<p id="pname" style="text-align:center; width:40%;color:white;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">
Some really long text in here
</p>

- ＆GT;文本似乎有一个text-align：left

使用display：inline-block：

<p id="pname" style="display:inline-block;text-align:center; width:40%;color:white;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">
Some really long text in here
</p>

- ＆GT;文本正确对齐且完全40％宽，但文本显示在<p>

下

我缺少什么？提前谢谢！

Answer 1

要使CSS中的块级元素居中，您必须添加margin:0 auto;，因为text-align:center仅影响文本和inline元素。

p {
  margin: 0 auto; /* center element horizontally */
  text-align: center;
  width: 40%;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background:#666;
}

body { background:#000; }

<p id="pname">Some really long text in here</p>

文本 - 在HTML中更改宽度时对齐更改

1 个答案: