html - 垂直对齐不起作用

Question

我知道这很烦人，似乎 CSS 中的垂直对齐是常见的陷阱，但我真的需要你的帮助。

我希望文本始终位于图像左侧的“中间”垂直位置(图像 test.gif 具有不同的尺寸)

我有这样的html元素结构(不幸的是由于系统限制我不能改变它)

<div class="wrapper">
    <div class="logo"> 
        <img alt="some text" src="http://localhost/test.gif">
    </div> 
    <div  class="source">some text</div>
</div>

CSS:

.wrapper {clear: both;}
.logo {float: left;}
.source { float: left;line-height: 16px;}

花了 1.5 小时，但没有成功。尝试将垂直对齐应用于具有不同定位等的不同元素......请帮忙!

Answer 1

如果你不需要支持 IE7，试试这个:

.wrapper { display: table; }
.logo { display: table-cell; }
.source { display: table-cell; vertical-align: middle; }

基本上，表格为您提供了垂直居中对齐的选项，通过让您的 div 像表格一样工作，我们可以模仿该选项。