图层响应图像在彼此的顶端与引导

我试图让两个图像在彼此之上，同时也在屏幕上垂直和水平居中。如果我把它们都定位得相对较好，那么第一个中心位置很好，而第二个位于第一个之下。图层响应图像在彼此的顶端与引导

#copy, #logo { 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
margin-left: auto; 
margin-right: auto; 
}

因此，我添加了一个包装，并相对定位，绝对定位图像。现在他们互相堆叠，但我失去了我的中心。

#wrapper { 
position: relative; 
top: 50%; 
transform: tranlasteY(-50%); 
margin-left: auto; 
margin-right: auto; 
} 

#copy, #logo { 
position: absolute; 
}

来源

2015-11-23 Kathryn Crawford

这里有一个代码笔与我的确切代码http://codepen.io/kathryncrawford/pen/vNwNdL –

喜欢这个https://jsfiddle.net/j08691/7gkwxs6c/1/embedded/result// – j08691

工程很棒！做出答案，如果你愿意的话，我会标记它。 –

可以省略包装，只是使用的子元素绝对定位，设置保证金自动和顶/右/下/左0：

#copy, #logo { 
 
    opacity: 1; 
 
    position: absolute; 
 
    margin:auto; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
}

<div id="wrapper"> 
 
    <img id="copy" class="img-responsive" src="http://fillmurray.com/600/600"></img> 
 
    <img id="logo" class="img-responsive" src="http://fillmurray.com/500/500"></img> 
 
</div>

来源

2015-11-23 16:21:43 j08691

你得让html，body的#wrapper和所有图像的父元素占据所有的屏幕，与height:100%。基于#wrapper设置绝对图像的位置，位置：相对于它。然后，将XY定位边距设置为50％（如您所做的那样）并翻译（-50％）（如您所做的那样）。

body,html{ 
    padding:0; 
    height:100%; 
} 

#wrapper { 
    position: relative; 
    height:100%; 
} 

#copy, #logo { 
    opacity: 1; 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translateY(-50%) translateX(-50%); 
}

Pen

观测数据：大图片BTW

来源

2015-11-23 16:20:25 teefars

谢谢！是的填充默里是我的最爱。 Placecage紧随其后，因为谁可以拒绝Nic Cage gif作为占位符？ –

试过这个。可悲的是，所有的东西都在屏幕的右侧结束了，并且不再居中：（ –

尝试'width：100％'也用于包装; – teefars

图层响应图像在彼此的顶端与引导

回答

相关问题