Question

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:

<div class="wraptocenter"><span></span>
<img src="blah" /></div> 
<div class="description">Lorizzle ipsum dolor sit amizzle, tellivizzle adipiscing fo shizzle. Owned sapizzle velizzle, bizzle volutpizzle, nizzle quis, gangster vizzle, arcu. Pellentesque eget tortizzle. Sizzle </div>

CSS:

.wraptocenter {   
background: orange;
float: left;
height: 120px;
margin: 0 10px 5px 0;
width: 120px;
}

.wraptocenter img {
    max-height: 120px;
    width:120px;
}

Some tricks like http://www.brunildo.org/test/img_center.html
works, but if I float the div, it stops working.

I’m Floating the div, so that another div containing Text can wrap around the image like a newspaper article.

Also, I’m getting the image from different website, and set the width to 120px. So, it will make height dynamic and different each time.

Is this possible?
Thank you.

Answer 1

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: 0 10px 5px 0;
}
.wraptocenter > div {
    height: 120px;
    width: 120px;
    background: orange;
    display: table-cell;
    vertical-align: middle
}
.wraptocenter img {
    max-height: 120px;
    width: 120px;
    display: block
}