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

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:

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/