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

Question

我不确定是否可以用 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有效，但如果我 float div，它就会停止工作。

我正在 float div，这样另一个包含文本的 div 可以像报纸文章一样环绕图像。

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

这可能吗？谢谢。

Answer 1

如果您在 .wraptocenter 上放置一个 position:relative;，然后放置一个 position:absolute;向左飘浮;顶部:50%； margin:-60px 0 0 0; 可以垂直居中。

您的另一个选择是将图像设为背景图像并使用百分比(或像素)定位