我已经搜索了其他问题,虽然这个问题看起来和其他几个问题类似,但到目前为止我看到的任何内容似乎都没有解决我遇到的问题.
我有一个包含许多其他div的div,每个div都向左浮动.这些div每个都包含一张照片和一个标题.我想要的只是让照片组在包含div中居中.
正如你可以从下面的代码中看到的,我已经使用这两种尝试overflow:hidden与margin:x auto父div的,并且我还添加了clear:both照片后(如在其他主题的建议).似乎没有什么区别.
谢谢.我很感激任何建议.
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
我在解决一堆浮动div问题时遇到了一些问题.我搜索了很多(特别是在这里和这里),但我似乎错过了一些东西.我会发布我的代码,希望有人在这里可以看到问题是什么...
我想要完成的是这些方面
截图http://efredericks.net/layout.PNG
我目前看到的行为是一切都正常浮动,但被推向左侧.不管我做了什么,我似乎无法将它放在中心位置.
我的外部容器在浏览器中居中,但内部没有任何内容.
HTML
<body>
<!-- outer_container - centers for IE -->
<div id="outer_container">
<!-- container - wrapper for content -->
<div id="container">
<!-- header - logo : menu -->
<div id="hdr">
<div id="hdr_right">
<h1><a href="#" id="lhome">logo</a></h1>
<div id="menu">
<ul>
<li><a id="menu_i1" href="#">item 1</a></li>
<li><a id="menu_i2" href="#">item 2</a></li>
<li><a id="menu_i3" href="#">item 3h</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<!-- /header -->
<!-- main -->
<div id="main">
<!-- problem area here -->
<div id="outer">
<div …