Question

我一直试图解决这个问题几个小时没有运气。我试图将一个Wordpress砖石风格画廊作为中心，我无法让我的生活得到它的工作。我一直在互联网上试图找到如何做到没有运气。我基本上希望图像在父容器内居中，假设父容器宽1000px，整个图库只有300px宽。而不是它左对齐，我希望它完美地位于中心。

有几个嵌套的div，我试图将inline-block应用于它们，然后text-align: center将父div与其他几个组合一起应用。我放弃了，希望有人告诉我哪里出错了。

我在下面添加了fiddle和源代码。此外，如果它有帮助，我正在使用的主题和画廊。 Simple Article Theme感谢您的帮助。

<div class="main-container">
    <div class="gdlr-shortcode-wrapper">
        <div class="gdlr-gallery-grid gdlr-item">
        <div class="gdlr-gallery-grid-container">
            <div class="gallery-grid-first">
                <div class="gallery-grid-first-inner"> <a href="#">
                    <img src="http://placekitten.com/240/300">
                </a>

                </div>
            </div>
            <div class="gallery-grid-second">
                <div class="gallery-grid-second-inner"> <a href="#">
                    <img src="http://placekitten.com/240/302">
                </a>

                </div>
                <div class="gallery-grid-second-inner"> <a href="#">
                    <img src="http://placekitten.com/242/305">
                </a>

                </div>
            </div>
        </div>
                </div>
    </div>
</div>

CSS：

.main-container {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.gdlr-shortcode-wrapper {
    margin-left: -15px;
    margin-right: -15px;
}
.gdlr-gallery-grid.gdlr-item {
    margin: 0px 13px;
}
.gdlr-gallery-grid.gdlr-item .gallery-grid-first {
    width: 33.33%;
    float: left;
    display: inline-block;
}
.gdlr-gallery-grid.gdlr-item .gallery-grid-first-inner {
    margin: 0px 2px 4px;
}
.gdlr-gallery-grid.gdlr-item .gdlr-gallery-grid-container img {
    display: block;
}
.gdlr-gallery-grid.gdlr-item .gallery-grid-second-inner {
    margin: 0px 2px 4px;
}
.gdlr-gallery-grid.gdlr-item .gallery-grid-second {
    width: 33.33%;
    float: left;
    display: inline-block;
}
a img {
    vertical-align: middle;
}

Answer 1

**no need to use float property with display inline-block. Also I used some general class for grid inner and gallery-grid**
<div class="main-container">
    <div class="gdlr-shortcode-wrapper">
        <div class="gdlr-gallery-grid gdlr-item">
            <div class="gdlr-gallery-grid-container">
                <div class="gallery-grid-first gallery-grid">
                    <div class="gallery-grid-first-inner gallery-grid-inner">
                        <a href="#"><img src="http://placekitten.com/240/300"></a>
                    </div>
                </div>
                <div class="gallery-grid-second gallery-grid">
                    <div class="gallery-grid-second-inner gallery-grid-inner">
                        <a href="#"><img src="http://placekitten.com/240/302"></a>
                    </div>
                    <div class="gallery-grid-second-inner gallery-grid-inner">
                        <a href="#"><img src="http://placekitten.com/242/305"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

中心两个div在父容器内左侧浮动

1 个答案: