将图像块居中

Question

在将图像块居中时需要一些帮助。这是我希望它看起来如何的图像。我试过 margin: 0, auto;并且有各种利润，但它似乎不起作用。

任何想法，我将不胜感激！

http://jsfiddle.net/tcd1s7xm/

    h1 {
    padding-top: 3%;
    padding-bottom: 3%;
    text-transform: uppercase;
    color: #58585B;
    font-weight: 500;
    text-align: center;
    font-size: 24px;
}

p {
    max-width: 80%; 
    min-height: auto;
    font-size: 14.5px;
    color: #58595B;
    line-height: 2em;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;


}
.break {
    padding-bottom: 3%;
}

.info-wrap {
    background-color: #EDEDED;
}

 .info-wrap img   {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.work {


}

.posts {

        display: inline-block;



}

.work-img {
padding: 0;


}

    <div class="work">

                <div class="row">
                    <h1>My Work</h1>
                </div>


                <div class="posts">
                    <div class="row">
                        <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="row">
                        <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="row">
                        <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 class="break"></div>

Answer 1

您使用的是 Foundation 5 吗？因为如果你是，你可能应该将图像嵌套在一个 12 的大 div 中。而且我认为行太多了。例如，您可以尝试：

    <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 上放置一个类，然后执行边距： 0 自动。没有 jsfiddle 中的图像有点困难。

Answer 2

您可以尝试结合使用display: inline-block 和text-align: center 来实现您想要的。

例如：

HMTL：

<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>

CSS：

.wrapper {
    text-align: center;
}

.wrapper .row {
    display: inline-block
}