Изображения сверху друг друга, в то время как центрированные вертикальные. и hor

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

Скала будет 300 слева, а ножницы 300 - справа.