Apologies if this question has already been addressed - I have tried numerous methods to center images horizontally without success. This particular image just does not want to align in the center!
For reference, here is the JSFiddle link
HTML: (Please note that the images used are taken from Google as examples)
When loading, each image receives either "height:100%;" or "width:100%;" based on whether the height to width ratio falls within or outside of the 4:3 ratio in landscape orientation.
This setup ensures that the image completely fills the containing div regardless of its size and shape.
<div class="imgOuter">
<div class="imgInner">
<img src="http://www.woroni.com.au/wp-content/uploads/2013/12/Cars-Lamborghini-Free-Wallpaper.jpg" style="height: 100%;">
</div>
</div>
<div class="imgOuter">
<div class="imgInner">
<img src="http://cdn.acidcow.com/pics/20100118/celebrity_portraits_by_tom_munro_03.jpg" style="width: 100%;">
</div>
</div>
CSS:
The main outer div is designed to maintain a fixed aspect ratio of 4:3 The inner div adds an internal border to the outer div which must retain its specific dimensions.
div.imgOuter{
float: left;
position: relative;
width: 33.3333%;
padding-bottom: 25%;
overflow:hidden;
clear:none;
}
div.imgInner{
position:absolute;
top:0;bottom:0;left:0;right:0;
overflow:hidden;
text-align:center;
border:2px solid #444;
cursor:pointer;
}
div.imgInner>img{
display:block;
position:absolute;
top:0;bottom:0;left:0;right:0;
margin:auto;
}
.imgInner: I have experimented with text-align:center; also tested sizing with height and width @ 100%...
In the attached fiddle, you will notice that the second image, in portrait orientation, aligns perfectly centered vertically as expected.
Moreover, when using a landscape image and setting the width to 100% instead of the height, it centers vertically flawlessly, resulting in white space above and below if its ratio is wider than 4:3.
Only when the height is set to 100% does the image default to left alignment, seemingly disregarding the left and right positioning.
My suspicion lies in the fact that the div.imgOuter lacks a defined height, only having a padding value. If that indeed is the issue, I am faced with the challenge of resolving both scaling aspect ratios and center alignment :(
Do you have any suggestions?