任何人都可以将IMAGE与HTML和CSS垂直对齐吗？

问题描述

| 我不确定CSS是否可以解决问题，但想在此进行确认。 这是代码段。 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浮动，它将停止工作。 我正在浮动div，以便另一个包含Text的div可以像报纸文章一样环绕图像。 另外，我从其他网站获取图片，并将宽度设置为120px。因此，每次都会使高度动态变化。 这可能吗？ 谢谢。     

解决方法

这将在现代浏览器和IE8 +中运行。 IE7根本不支持

display: table-cell

。希望您不需要IE7支持：） 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
}

    ,如果在.wraptocenter上放置

position:relative;

，然后再放置

position:absolute; float:left; top:50%; margin:-60px 0 0 0;

，则可以垂直居中。 您的另一个选择是将图像设置为背景图像，并以百分比（或像素）定位