设置 div 的宽度，让 div 居中并将文本左对齐。

Question

我有一个小问题，但是我无法解决它。我有一个宽度为864像素的内容头部，使用了background-image属性并且希望实现图片平铺。此外，我还有一个底部图片。

现在我在背景图片上覆盖了一个<div>，我希望将其宽度设置为855像素，并且让文本左对齐但又居中以适应背景。

我曾尝试使用padding left属性解决这个问题，但我发现这对我的屏幕分辨率并不正确。

简而言之，即为：设置一个div宽度-使div居中对齐-将其文本(内容)左对齐。

- Alex

Answer 1

在内部div上设置自动边距：

<div id="header" style="width:864px;">
    <div id="centered" style="margin: 0 auto; width:855px;"></div>
</div>

或者，将父元素文字居中，然后在内部div上强制文本左对齐：

<div id="header" style="width:864px;text-align: center;">
    <div id="centered" style="text-align: left; width:855px;"></div>
</div>

- Stephen Wood

Answer 2

尝试:

#your_div_id {
  width: 855px;
  margin:0 auto;
  text-align: center;
}

- Kleber S.

---

这基本上解决了问题！文本对齐必须是左对齐。但是现在...... 文本穿过内容的背景线。尝试使用一些填充来解决它，但它不会动...... - Alex

请确保div语义有序。<div id="content"> <!-- 宽度正确地设置 --> <div id="your_div_id"> [文本内容] </div> </div> - Kleber S.

Answer 3

使用自动边距。

div {
   margin-left: auto;
   margin-right: auto;
   width: NNNpx;

   /* NOTE: Only works for non-floated block elements */
   display: block;
   float: none;
}

详细阅读请访问SimpleBits CSS Centering 101

- nikc.org

Answer 4

所有这些答案都应该足够。

然而，如果您没有定义宽度，则自动边距将不起作用。

我发现了一个巧妙的小技巧来居中一些更棘手的元素（特别是图像）。

.div {
   position: absolute;
   left: 0;
   right: 0;
   margin-left: 0;
   margin-right: 0;
}

- Stephen