Can Anyone Vertical Align An Image With Html And Css?

I'm not sure if there is can be done with CSS, but wanted to confirm it here. This is the code snippet.. http://jsfiddle.net/2CHEb/ HTML:

Solution 1:

If you put a position:relative; on your .wraptocenter and then then a position:absolute; float:left; top:50%; margin:-60px 0 0 0; you can vertically center.

Your other option would be to make the image a background-image and position it with percentages (or pixels)

Solution 2:

This will work in modern browsers and IE8+.

IE7 simply does not support display: table-cell. I hope you don't need IE7 support :)

http://jsfiddle.net/2CHEb/6/

.wraptocenter {   
    float: left;
    margin: 010px5px0;
}
.wraptocenter > div {
    height: 120px;
    width: 120px;
    background: orange;
    display: table-cell;
    vertical-align: middle
}
.wraptocenterimg {
    max-height: 120px;
    width: 120px;
    display: block
}

Share