Question

我一直致力于创建一个带有缩略图滑块的照片库，而我唯一的问题是将图像置于div中心。

我尝试过使用法线：

display: block;
margin: 0 auto;

但这只是搞砸了图像加载到div上方的方式。

这是一个关于它现在的样子的JSFiddle：http://jsfiddle.net/bWk24/

提前谢谢所有人！

Answer 1

从你的css下的absoulute取出#gallery-display [id^="image"] img的位置

#gallery-display [id^="image"] img {
    position: absolute;
    top: -500px;
    border: 0px none;
    transition: top 0.5s ease-in 0s;
}

到

#gallery-display [id^="image"] img {
    top: -500px;
    border: 0px none;
    transition: top 0.5s ease-in 0s;
}

Answer 2

小提琴：http://jsfiddle.net/bWk24/4/ 将其添加到CSS：

       #gallery-display [id^='image']:target img {
            top: 0; 
            display: block;
            margin: 0 auto;
            height: 500px;
            left: 0; //Add this property
            right: 0;   //Add this property
        }

Answer 3

由于图像绝对定位。

您需要添加

img {
    right: 0;
    left: 0;
}

所以margin: 0 auto;试图将自己置于中间，绝对是从其相对父母的两侧。

这是小提琴：http://jsfiddle.net/nHLpz/

CSS：图像不以显示为中心：块边距：0自动？

3 个答案: