任何人都可以将图像与 HTML 和 CSS 垂直对齐吗？答案

【问题标题】：Can anyone Vertical Align an IMAGE with HTML and CSS?任何人都可以将图像与 HTML 和 CSS 垂直对齐吗？
【发布时间】：2011-04-20 05:16:53
【问题描述】：

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

这是代码 sn-p.. 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 可以像报纸文章一样环绕图像。

另外，我从不同的网站获取图像，并将宽度设置为 120 像素。因此，它会使高度每次都动态变化。

这可能吗？谢谢。

【问题讨论】：

您希望文本环绕底部和顶部？

标签： html css image vertical-alignment

【解决方案1】：

如果您在 .wraptocenter 上放置 position:relative;，然后在 position:absolute; float:left; top:50%; margin:-60px 0 0 0; 上放置，您可以垂直居中。

您的另一个选择是将图像设为背景图像并以百分比（或像素）定位它

【讨论】：

【解决方案2】：

这适用于现代浏览器和 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
}

【讨论】：