Question

    .imgContain{
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.imgContain img{
    width: 250px;
    height: 250px;
    float: left;
}

.imgContain img:hover{
    opacity: 0.60;
}

出于某种原因，这不会集中在我的页面上。任何帮助表示赞赏。

Answer 1

很难理解你真正想要发生的事情，但这是使用inline-block的另一种方式 - http://jsfiddle.net/sheriffderek/29jvS/

HTML

<div class="imgContain">
    <img src="http://placehold.it/400x400" alt="" />
    <img src="http://placehold.it/400x400" alt="" />
</div>

CSS

.imgContain{
    text-align: center;
}

.imgContain img {
    display: inline-block;
    width: 250px;
    height: 250px;
}

Answer 2

请以像素为单位指定图像容器的宽度。当您将宽度设为100％时，margin: 0 auto;将无效。请检查这个小提琴，让我知道这是否解决了你的问题： http://jsfiddle.net/LynDL/2/

Answer 3

您需要处理imgContain宽度。它在'％'中，而您在'px'中提供的图像宽度。假设你想要4 250px图像，那么你应该保持imgContain宽度1000px。例如：

.imgContain{
    width: 1000px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.imgContain img{
    width: 250px;
    height: 250px;
    float: left;
}

如果你想流畅，那么让imgContain宽度为100％，但将图像宽度改为25％。

.imgContain{
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.imgContain img{
    width: 25%;
    height: 25%;
    float: left;
}

希望它有所帮助。

CSS图库不会居中

3 个答案:

HTML

CSS