css - 如何将居中 div 的内容向左对齐？

Question

我在另一个 div 中居中了一个 div，但想左对齐居中的内部 div 的内容。我怎样才能做到这一点？

我当前的 HTML 如下所示：

<div style="border: solid 1px #ff0000;text-align:center;">     
  <div style="border:solid 1px #00ff00;">
      <img src="/some_url_1/" style="width: 80px; height 80px; border: 0"/>
      <img src="/some_url_2/" style="width: 80px; height 80px; border: 0"/>
  </div>
</div>

目前，图像在内部 div 内居中，但我希望它们与居中内部 div 的左侧对齐。

知道我错过了什么吗？

Answer 1

使用边距使内部元素居中：

<div id="outer">
    <div id="inner">
        Things to align to the left
    </div>
</div>

使用以下 CSS：

#inner {
    width: 75%;
    margin: 0 auto;
    text-align: left; /* generally don't need to explicitly state this */
}

演示：http: //jsfiddle.net/W95Qy/

另外，作为一个友好的建议，请尽量将 CSS 排除在 HTML 之外。它通常会使您的代码更易于阅读、管理并保持您在该领域工作的长期理智；）

Answer 2

您可以使用text-align: left内部 div 执行此操作，如下所示：

<div style="border: solid 1px #ff0000; text-align: center;">     
  <div style="border:solid 1px #00ff00; text-align: left;">
      <img src="/some_url_1/" style="width: 80px; height 80px; border: 0"/>
      <img src="/some_url_2/" style="width: 80px; height 80px; border: 0"/>
  </div>
</div>

​</p>