图片未居中对齐

Question

我有一排 div，我正试图用它来构建画廊行。尽管使用 align: auto;在图像上，它们似乎仍然向左对齐。我想知道我是否遗漏了什么。

这是我的fiddle：http://jsfiddle.net/82nrw19x/

这是我的代码：

CSS:

.galleryRow{

}

.galleryIconOuter{
    background-color: gray;
         width: 20%;
         height: 70px;
    border-radius: 5px;
}


#wrapper {
    min-width:100%;
    min-height:100%;
    border: 4px gainsboro solid;
    margin: 0auto;
    position: relative;

}
#im {
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background-image: url("https://s31.postimg.org/x8rd1797f/product1.png");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

    <section id="products" class="about">
    <div class="container">
            <div class="info col-lg-12 text-center">
                <h2>Products</h2>
                <div class="galleryRow w3-row">
                    <div class="galleryIconOuter w3-col">
                    <div id="wrapper">
                    <div id="im">
                    </div>
                    </div>                        
                    </div>
                    <div class="galleryIconOuter w3-col">
                    <div id="wrapper">
                    <div id="im">
                    </div>
                    </div>                        
                    </div>
                    <div class="galleryIconOuter w3-col">
                    <div id="wrapper">
                    <div id="im">
                    </div>
                    </div>                        
                    </div>
                    <div class="galleryIconOuter w3-col">
                    <div id="wrapper">
                    <div id="im">
                    </div>
                    </div>                        
                    </div>
                    <div class="galleryIconOuter w3-col">
                    <div id="wrapper">
                    <div id="im">
                    </div>
                    </div>
                    </div>
                </div>
            </div>
    </div>
</section>

如有任何帮助或建议，我们将不胜感激。

提前致谢。

Answer 1

您将 img 作为背景，那么您只需设置

background-position to center:

试试这个：

#im {
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("https://s31.postimg.org/x8rd1797f/product1.png");
    background-repeat: no-repeat;
    background-size: contain;
    /* ADD THIS LINE*/
    background-position:center;
}

或者 shorthand:

background: url("https://s31.postimg.org/x8rd1797f/product1.png") no-repeat center/contain;

Updated Fiddle

Answer 2

你是说喜欢this吗？

.galleryRow{
    position: relative;
    width: 80%;
    left: 10%;
    right: 10%;
}

这就是你想让他们"align to middle?"

的意思吗

图片未居中对齐

Image does not align to middle

html

css

image

margin