Html 尝试在不影响动画的情况下将图像布置在页面上的网格中

有一个问题，我希望图像在页面上的网格中排列，但我的动画似乎受到我尝试过的东西的影响。例如，横幅可能偏离中心或比图像大

以下是我到目前为止所掌握的一些资料：

所以，我终于把图片放在中间了，但是在一个丑陋的列中排成一行，然后向下倾斜

我想至少在顶部和底部的两个图像与每个图像之间的空间两个。有什么想法吗

以下是html：

<div id="content">
    <div id="main">
                <div class="view view-first">
                    <img src="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 1</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="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 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 class="view view-first">
                    <img src="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 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">more info</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img src="http://placehold.it/399" />
                    <div class="mask">
                        <h2>Item 11</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">Have a look</a>
                    </div>
                </div>
                </div>       
    </div>
    </div>
    </div>

（编辑）

在这里，我做了一个快速/简单的更改

我已更改了类。请查看以下内容：

.view {
    width: 399px;
    height: 266px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-top: 5px;
    display: inline-block;
    margin-right: 5px;
}

你想得到这个吗？

---

如果正确理解您的问题：将

文本对齐：居中

添加到。

内容

#内容{
...
文本对齐：居中；
}

将浮动设置为每秒钟查看一次

和
clear:right
：

div.view-first{
浮动：左；
保证金：4倍；
}
div.view-first:第n个子级（2n+0）{
清楚:对,；
}

叉形小提琴->（更新，完全忘记了边距）
好的，为了让事情看起来像我想要的那样，我将CSS更改为：

#content {
    clear:both;
    margin: 0 auto;
    width: 1000px;
    padding: 35px 0 35px 0;
    text-align: center;

}

#main {
    clear:both;
    margin: 0 auto;
    width: auto;
    text-transform: uppercase;
}

/*----------- grid ----------*/

.view {
    clear:both;
    width: 324px;
    height: 216px;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-top: 5px;
    display: inline-block;
    margin-right: 5px;
}
.view .mask,.view .content {
   width: 324px;
   height: 216px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
} 

感谢MCSI和davidkonrad
ya！这是接近，但我想一些空间之间的水平图像以及有图像休息在页面的中心。看起来它们仍在向左对齐。谢谢MCSI，我需要添加#内容{text align:center；}以获得我想要的内容。谢谢David，#内容{text align:center；}工作得非常好。
#content {
    clear:both;
    margin: 0 auto;
    width: 1000px;
    padding: 35px 0 35px 0;
    text-align: center;

}

#main {
    clear:both;
    margin: 0 auto;
    width: auto;
    text-transform: uppercase;
}

/*----------- grid ----------*/

.view {
    clear:both;
    width: 324px;
    height: 216px;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-top: 5px;
    display: inline-block;
    margin-right: 5px;
}
.view .mask,.view .content {
   width: 324px;
   height: 216px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}