如何将居中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/

此外,作为一个友好的建议,尽可能尝试将CS​​S保持在HTML之外.它通常会使您的代码更容易阅读,管理并保持您在该领域工作的长期理智;)