任何人可以垂直对齐一个IMAGE与HTML和CSS？ [英] Can anyone Vertical Align an IMAGE with HTML and CSS?

问题描述

我不确定是否可以使用CSS，但想在这里确认。

I'm not sure if there is can be done with CSS, but wanted to confirm it here.

这是代码段。
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;
}

http://www.brunildo.org/test/img_center.html
可以工作，但如果我浮动div，它停止工作。

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

我正在浮动div，因此包含文字的另一个div可以像报纸文章一样环绕图像。

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

此外，我从不同的网站获取图像，并将宽度设置为120像素。所以，它将使高度动态和每次不同。

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.

这是可能吗？

推荐答案

这将适用于现代浏览器和IE8 +。

This will work in modern browsers and IE8+.

IE7根本不支持 display：table-cell 。我希望您不需要IE7支持：）

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
}

这篇关于任何人可以垂直对齐一个IMAGE与HTML和CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！