How to center a span containing an image in a div

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 ho

Answer 1

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 2

You can try the following:

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

Answer 3

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 4

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 5

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