css - 如何使用 CSS 显示居中的 div 墙？

Question

可能的重复：
CSS 适当的方式来居中内容

我的目标是使用 CSS（而不是表格）显示一堵图片墙。

我希望图片在容器的中心对齐

wallElement应该有320px宽度和240px高度。

<div id="container" style="width:100%">
  <div style="width:320px;height:240px">MyPicture1</div>
  <div style="width:320px;height:240px">MyPicture2</div>
</div>

我试过display:inline-block;没有运气。我取得了成功，float: left;但墙元素没有居中。

Answer 1

inline-block将提供您要求的解决方案。

这是一个如何实现的工作示例：http: //jsfiddle.net/2BHTH/2/

HTML

<div id="Container">
 <div class="picture">MyPicture1</div>
 <div class="picture">MyPicture2</div>
 <div class="picture">MyPicture3</div>
 <div class="picture">MyPicture4</div>
</div>​

CSS

body { 
    width:95%;
    margin: 0 auto;        
}

#Container {
    padding:.5em;
    margin: 0 auto;
    display:inline-block;
    background-color:#eee;
}

div.picture {
    width:320px;
    height:240px;
    display:inline-block;
    margin: .5em;
    background-color:#ccc;
}​