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


i have looked tips how center div in middle of page. used method:

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

so, div in middle of page, need images inside of line directly on top of 1 another. if this, can fade them out using jquery, revealing new image.

now, tried many different techniques line them up, none work when centered this.

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

how do it?

this rock paper scissors game if hadn't noticed. here's i've made far.

you can position images absolute in same coordinates stack on top of each other.

when element has specific width, left:0; right:0; margin:auto; cool way horizontally center in relative parent. same method works vertical centering.

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

you can use method offset elements center.

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

rock 300 left , scissors 300 right.


Comments

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

java - Could not locate OpenAL library -

sorting - opencl Bitonic sort with 64 bits keys -