Division positioning - html

Question

The html is given below
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
#cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
}
#cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div class="container">
<div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>
The background is properly aligned but the images are offset . What have i done wrong ? Why is the image not being positioned properly?
All the images used are of the dimension 360px height and 640px width.

Answer 1

The images are offset because you are using text-align: center on the container which means that the origin for your positioned child elements is no longer 0 0, but 50% 0 (centre top):
.container {
...
text-align:center;
}
To get around this you just need to override this for the child elements:
#cf {
..
text-align: left;
}
Demo below
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
#cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
text-align: left;
}
#cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div class="container">
<div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>
But your HTML is invalid. IDs must be unique. You should be using a class for your cf element like so...
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
text-align: left;
}
.cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.cf img.top:hover {
opacity:0;
}
<div class="container">
<div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>