Search code examples
htmlcssimagealignment

How to align an image of any size from the centre, rather than the top/bottom/sides, using css

I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.

enter image description here

Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.

Thanks!

EDIT: Here's the layout http://pastebin.com/SisQHM4y

Solution

  • Hi you can do this pure css as like this

    css

    .wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 400px;
    background:green;
}

    HTML

    <div class="wraptocenter"><img src="//?" alt="images" /></div>

    Live demo http://jsfiddle.net/rohitazad/tvrMp/

    More information about this http://www.brunildo.org/test/img_center.html ​