如何在text-align居中元素上使用margin / padding

Question

HTML

<div>Test</div>

CSS

div {
text-align: center;
width:200px;
margin-left:20px;
}

我不想让文字处于中心位置，而是略微向右/向左推动。这可能吗？

Answer 1

如果是单行，您应该可以这样做：

 text-indent:1em;

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Answer 2

如果您在一侧使用填充，它将通过您设置的任何内容在视觉上偏移文本。你列出的内容会起作用，就像使用填充而不是边距一样，但它取决于网站的外观。

Answer 3

有可能。目前，您的margin-left属性将影响div，并不专门针对内部文本。

我会做以下事情。如果您将文本包围在<p>标记中，则可以使用填充向左或向右偏移它。

div {
  text-align: center;
  width:200px;
  background:blue;
}
div p{
  padding-left:30px;
}

<div>
   <p>Test</p>
</div>