设置div宽度，div居中对齐，文字左对齐答案

【问题标题】：Set a div width, align div center and text align left设置div宽度，div居中对齐，文字左对齐
【发布时间】：2011-10-20 14:26:36
【问题描述】：

我有一个小问题，但我无法解决。我有一个 864px 宽度的内容标题、一个重复的背景图像和页脚图像。现在我在背景图像上有这个<div>，我希望它像 855px 宽度，文本左对齐但居中对齐，所以它适合背景。

我曾经让它留下一些填充，但我发现这是我的屏幕分辨率的正确填充。

简单来说就是：设置 div 宽度 - 对齐 div 中心 - 将其文本（内容）左对齐。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

试试：

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

【讨论】：

这几乎成功了！必须离开并完成文本对齐。只是现在.... 文本穿过内容的背景线。尝试用一些填充来解决它，但它不会让步......
只要确保 div 语义有序。

[文本内容]

【解决方案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

【讨论】：

【解决方案4】：

所有这些答案就足够了。但是，如果您没有定义宽度，则自动边距将不起作用。

我发现了这个巧妙的小技巧，可以让一些更顽固的元素（尤其是图像）居中。

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

【讨论】：