图像彼此重叠，同时居中垂直。和贺

Question

我查阅了一些关于如何将 div 居中放置在页面中间的技巧。我使用了这个方法：

width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;

所以，既然 div 位于页面中间，我需要将其中的一些图像直接排列在彼此之上。如果这样做，我可以使用 jQuery 将它们淡出，显示新图像。

现在，我尝试了许多不同的技术来排列它们，但是 none 当它们像这样居中时工作。

HTML:

<div class="choose" align="center">
    <h2 id="question">Rock, paper, or scissors?</h2>

    <img src="Images/Rock.png" id="rock">
    <img src="Images/Result/Red Rock.png" id="Selected" style="opacity:1">
    <img src="Images/Paper.png" id="paper">
    <img src="Images/Result/Red Paper.png" id="Selected" style="opacity:1">
    <img src="Images/Scissors.png" id="scissors">
    <img src="Images/Result/Red Scissors.png" id="Selected" style="opacity:1">
</div>

CSS:

.choose {
    width: 750px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -375px;
}

.choose img {
    margin-left: 5px;
    margin-right: 5px;
    width: 150px;
}

我该怎么做？

如果您没有注意到，这是一款剪刀石头布游戏。 Here's what I've made so far.

Answer 1

您可以将带有 absolute 的图像放置在相同的坐标中，以便它们相互堆叠。

当您的元素具有特定宽度时，left:0; right:0; margin:auto; 是一种将其水平居中放置在其 relative 父元素中的好方法。同样的方法适用于垂直居中。

.choose img {
    width:150px;
    height:150px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

您也可以使用此方法从中心偏移元素。

.choose img.rock {
    left:-300px;
}

.choose img.sci {
    left:300px;
}

石头向左300，剪刀向右300。

图像彼此重叠，同时居中垂直。和贺

Images on top of each other while centered vert. and hor

css

center

alignment

fadeout

fadein