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:

<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.

回答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
}

回答2:

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)

来源：https://stackoverflow.com/questions/5680345/can-anyone-vertical-align-an-image-with-html-and-css

标签

html

css

image

vertical-alignment