How to center a span containing an image in a div - css

Question

I have a main div (#homeGallery), in which i have a span(.imgClass) that is used to load one of a list of images.
I need the image to be centered not only vertically but horizontally in the div.
So far I have this code.
#homeGallery > .imgClass{
margin:auto;
position: relative;
top: 0;
bottom: 0;
display: block;
left: 0;
right: 0;
}
and
#homeGallery > .imgClass > img {
margin:auto;
float:center;
max-width:60%;
max-height:99%;
border: 2px solid;
}
Any help would be appreciated

Answer 1

This is a jewel I found recently. Use position: absolute with a top, left, bottom and right. You can center your span horizontally and vertically.
HTML:
<div class="wrapper">
<span class="image"></span>
</div>
CSS:
.wrapper {
width:400px;
height: 400px;
position: relative;
background-color: #afafaf;
}
.wrapper .image {
position: absolute;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
background-color: #000;
}
http://jsfiddle.net/QTDrm/

Answer 2

You can try this code:-
#homeGallery > .imgClass > img {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
}

Answer 3

You can try the following:
#homeGallery > .imgClass > img {
margin:0px auto;
display:block;
max-width:60%;
max-height:99%;
border: 2px solid;
}

Answer 4

Here's a Fiddle
#homeGallery .imgClass {
position: relative;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
If you dont know the image width & height than you could use jQuery solution
$(function() {
var imgW = $('.imgClass').outerWidth(),
imgH = $('.imgClass').outerHeight();
$('.imgClass').css({ marginLeft: - imgW / 2 + 'px', marginTop: - imgH / 2 + 'px' });
});
and this CSS
#homeGallery .imgClass {
position: relative;
top: 50%;
left: 50%;
}

Answer 5

This is my prefered method:
HTML
<div id="homeGallery">
<span class="imgClass">
<span class="fakeImg">You can use whatever img you want here</span>
</span>
</div>
CSS
#homeGallery{
height: 400px;
border: 1px solid #333;
text-align: center;
}
#homeGallery:before{
content: '';
height: 100%;
vertical-align: middle;
display: inline-block;
}
.imgClass{
display: inline-block;
vertical-align: middle;
text-align: left;
background-color: blue;
}
jsfiddle here.
The good side is that this is 100% css-based vertical alignment. You don't have to worry about screen size or DOM size change.
The cons is that it doesn't work on IE7 or lower.

Answer 6

If you want to both vertically and horizontally center an element, you should have a look at this approach:
jsFiddle
It works in all current browsers and IE8+.
HTML
<div>
<span class="element"></span> <!-- This can be any element -->
</div>
CSS
html, body {
width: 100%;
height: 100%;
display: table;
}
body > div {
display: table-cell;
vertical-align: middle;
}
body > div > .element {
display: block;
margin: 0px auto;
}
In your specific case with an img inside a span inside a div, I would solve it this way using the approach I have outlined above: jsFiddle
Note that I had to change some CSS classes to get it to work nicely with the image inside the span. I have set text-align: center on the div and display: inline-block; on the span. Below I have inserted the full classes which I have had to change to make it work for your situation.
CSS
body > div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
body > div > .element {
display: inline-block;
}