Question

需要一些帮助来集中一组图像。这是我想要它的样子的图像。我试过保证金：0，自动;并且有各种各样的利润，但似乎没有效果。

任何想法，我将非常感激！

Center a block of Images

    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>

然后可能尝试使用margin：0自动对CSS中的工作图像，或者如果不起作用，尝试通过在big-12前添加类名将类放在大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
}

居中一块图像

2 个答案: