如何在文本对齐居中元素上使用边距/填充答案

【问题标题】：How to use margin/padding on text-align centered element如何在文本对齐居中元素上使用边距/填充
【发布时间】：2014-04-18 23:45:21
【问题描述】：

HTML

<div>Test</div>

CSS

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

我不想让文本居中，但稍微向右/向左推。这可能吗？

【问题讨论】：

【解决方案1】：

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

 text-indent:1em;

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：