Question

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

这是我的小提琴：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至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;
}

或简写：

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%;
}

这是你的意思，希望他们“与中间对齐吗？”

图像不对齐中间

2 个答案: