html - 试图使图像网格居中并保持在左侧

Question

我试图将页面中的图像居中，以允许根据我设置的大小填充空间，但它们只是粘在左边。我已经尝试了很多解决方案并且已经接近但它没有居中。要清楚地了解我在这里寻找的是一个 fiddle :

http://jsfiddle.net/fnGwP/

有什么解决办法吗？

这是 html:

<div id="content">
    <div id="main">
        <div class="view view-first">
            <img src="images/calendar-2014-web.jpg" />
            <div class="mask">
                <h2>2014 Calendar decal</h2>
                <br>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                <br>
                <a href="#" class="info">Buy now</a>
            </div>
        </div>  
        <div class="view view-first">
            <img src="images/calendar-2014-web.jpg" />
            <div class="mask">
                <h2>Hover Style #1</h2>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                <a href="#" class="info">Read More</a>
            </div>
        </div>         
    </div>
</div>

这是CSS:

#content {
    clear:both;
    margin: 0 auto;
    width: 1000px;
    padding: 35px 0 35px 0;

}

#main {
    clear:both;
    margin: 0 auto;
    width: auto;
    text-transform: uppercase;
}
.view {
   width: 399px;
   height: 266px;
   margin: 10px;
   overflow: hidden;
   position: relative;
   text-align: center;
}
.view .mask,.view .content {
   width: 399px;
   height: 266px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

/*----------- photos ----------*/
.view img {
   display: block;
   position: relative;
   width: 399px;
   height:auto;
}

Answer 1

根据下面的评论 3 编辑答案。将这些添加到当前样式中，这是将 .view div 居中放置在 4 个方形 block 中的一种方法。

#main {
    text-align: center;
}

.view {
    display: inline-block;
}

另一种选择是在#main 上设置宽度(例如 820 像素)，然后 float .view 框。