Question

1）我试图显示一个垂直居中并位于容器左半部分的图像（由容器包裹）。（根据我的上一篇文章：Partial cover the screen and slide the overlay-element）

2）问题是，图像是svg文件，它应该适合用户屏幕，因此它具有动态宽度和高度。我使用47％的宽度，高度应自动设置，以保持比例。

对于第一部分（居中和定位），这是小提琴，它起作用：http://jsfiddle.net/gbgopon2/10/

如您所见，红色占位符具有给定的高度和宽度。

现在我尝试添加图像并更改宽度而没有高度。这根本不起作用。

所以也许有人有一个更好的解决方案，可以在页面上放置具有动态尺寸的可缩放svg图像，使其垂直居中并在屏幕的左半部分居中... 为什么在滑动叠加容器时图像不会消失？

CSS：

body {
    margin: 0;
}
#background {
    background-color: #ddd;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}
#overlay {
    height: 100%;
    position: absolute;
    background-color: #fff;
    left: 0em;
    right: 0em;
    top: -3em;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
}
#position {
    width: 40%;
    background: red;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 25%;
}

HTML：

<div id="background"></div>
<div id="overlay">
    <div id="position">
        <img src="http://placeskull.com/170/170">
    </div>
</div>

Answer 1

使用IE11，Firefox和Chrome测试ghost element的方法：

    body {
        margin: 0;
    }
    #background {
        background-color: #ddd;
        width: 100%; height: 100%;
        position: absolute; z-index: 0;
    }
    #overlay {
        height: 100%;
        position: absolute; left: 0em; right: 0em; top: -3em;
        background-color: #fff;
        overflow: hidden; /* it hides the image it's covered */
        -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
        z-index: 1;
    }
    #position {
        position: absolute; top: 0; left: 0; width: 50%; /* EDIT: added to center in the left half of the screen */
        text-align: center; height: 100%;
    }
    #position:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    #position img {
        display: inline-block;
        vertical-align: middle;
    }

http://jsfiddle.net/gzc6nbvv/9/

result

为什么在滑动叠加容器时图像不会消失？

在overflow: hidden;选择器中添加#overlay可以解决问题。

Answer 2

如果你不知道图像比率，那么仅使用css很难准确设置在中心...你必须使用百分比来定位它... （对不起我可怕的英语）

尝试这样的事情（这可能不是你的最终解决方案，但你可以在这里提取一些内容）：

#position img{
    position: absolute;
    height: 50%;
    top: 50%;
    left: 50%;
    margin-left: -49.7%;
    margin-top: -37%;
}

Answer 3

编辑：这似乎只适用于Chrome

诀窍是使用display: table：

body {
    margin: 0;
}
#background {
    background-color: #ddd;
    width: 100%; height: 100%;
    position: absolute; z-index: 0;
}
#overlay {
    height: 100%;
    position: absolute; left: 0em; right: 0em; top: -3em;
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    z-index: 1; overflow: hidden;
}
#position {
    background: red;
    position: absolute; left: 25%; top: 0; bottom: 0;
    width: 40%; 
    display: table; text-align: center; margin: auto;
}
#position img {
    display: block; margin: auto;
}

http://jsfiddle.net/gzc6nbvv/1/

可扩展的定位和居中

3 个答案:

编辑：这似乎只适用于Chrome