Html 将图像块居中

需要一些图像块居中的帮助。这是一张我希望它看起来是什么样子的图片。我试过边距：0，自动；虽然利润率各不相同，但似乎不起作用

如果有任何想法，我将不胜感激

h1{
垫面：3%；
垫底：3%；
文本转换：大写；
颜色：#585b；
字号：500；
文本对齐：居中；
字体大小：24px；
}
p{
最大宽度：80%；
最小高度：自动；
字号：14.5px；
颜色：#58595B；
线高：2米；
字体大小：300；
文本对齐：居中；
字母间距：0.05em；
显示：块；
左边距：自动；
右边距：自动；
文本转换：大写；
}
.休息{
垫底：3%；
}
.信息包装{
背景色：#EDEDED；
}
.info-wrap-img{
显示：块；
左边距：自动；
右边距：自动
}
.工作{
}
.职位{
显示：内联块；
}
.工作img{
填充：0；
}
我的作品
<代码> > p>你使用基础5吗？因为如果是这样的话，你可能应该把图像嵌套在一个大的12分区中。我认为行太多了。例如，您可以尝试：

    <div class="posts">
        <div class="row">

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt=
                    "People Portraits" src="img/people.png"></div>

                <div class="large-6 columns work-img"><img alt="Murals"
                    src="img/murals.png"></div>
            </div>

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt=
                    "Animal Portraits" src="img/animal.png"></div>

                <div class="large-6 columns work-img"><img alt=
                    "Canvas Paintings" src="img/canvas.png"></div>
                </div>

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt="Surface Design"
                    src="img/surface.png"></div>

                <div class="large-6 columns work-img"><img alt=
                    "Tromp L'oeil" src="img/tromp.png"></div>
            </div>

        </div>
    </div>



然后在CSS中的工作图像上尝试margin:0 auto，或者如果不起作用，尝试在large-12前面添加类名，在large-12上放置一个类，然后执行margin:0 auto。在JSFIDLE中没有图像是有点困难的。
您可以尝试将
显示：内联块
和
文本对齐：居中
结合起来以实现您想要的效果

例如：

HMTL：

如果没有真实的图像，小提琴是无用的。使用类似lorempixel.com的服务作为替代
    <div class="posts">
        <div class="row">

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt=
                    "People Portraits" src="img/people.png"></div>

                <div class="large-6 columns work-img"><img alt="Murals"
                    src="img/murals.png"></div>
            </div>

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt=
                    "Animal Portraits" src="img/animal.png"></div>

                <div class="large-6 columns work-img"><img alt=
                    "Canvas Paintings" src="img/canvas.png"></div>
                </div>

            <div class="large-12">
                <div class="large-6 columns work-img"><img alt="Surface Design"
                    src="img/surface.png"></div>

                <div class="large-6 columns work-img"><img alt=
                    "Tromp L'oeil" src="img/tromp.png"></div>
            </div>

        </div>
    </div>

<div class="wrapper">
    <div class="row">
        <div class="image">
            <!-- image link and etc -->
        </div>
        <div class="image">
            <!-- image link and etc -->
        </div>
    </div>
    <div class="row">
        <div class="image">
            <!-- image link and etc -->
        </div>
        <div class="image">
            <!-- image link and etc -->
        </div>
    </div>
    <div class="row">
        <div class="image">
            <!-- image link and etc -->
        </div>
        <div class="image">
            <!-- image link and etc -->
        </div>
    </div>
</div>

.wrapper {
    text-align: center;
}

.wrapper .row {
    display: inline-block
}