我将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的左侧内部对齐。
知道我缺少什么吗?
答案 0 :(得分:7)
使用边距使内部元素居中:
<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 */
}
另外,作为一个友好的建议,尽可能地尝试将CSS保留在HTML之外。它通常会使您的代码更容易阅读,管理并保持您在该领域工作的长期理智;)
答案 1 :(得分:0)
您可以使用内部div上的text-align: left
执行此操作,如下所示:
<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>