Question

我已经查找了一些关于如何在页面中间居中div的提示。我用这个方法：

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

所以，既然div位于页面的中间，我需要一些内部的图像直接排列在一起。如果我这样做，我可以使用jQuery淡出它们，揭示新的图像。

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

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;
}

Rock左侧300，右侧300剪刀。

图像在彼此的顶部，同时居中的顶点。和hor

1 个答案: