图像居中

Question

您好，请将以下代码附加 3 次:

<div class="bio">
    <div class="bio-icon"><img src="/images/icon_location.png" alt="Location" /></div>
    <div class="bio-content">
        <div class="bio-title">location:</div>
        <div class="bio-text">' . $obj[0] . '</div>
    </div>
</div>

在每种情况下，bio-icon div 中的图像都不同(宽度和高度不同)。基本上，会有一个图标，旁边有一段文字。我希望文本居中(垂直)，但我不知道该怎么做，因为每个图标都有不同的高度!我该怎么办？

谢谢

Answer 1

你可以试试这个

.bio {
  display:table;
}

.bio-icon, bio-content {
  display:table-cell;
  vertical-align:middle;
}

唯一的问题是 IE7 无法识别 css 表格属性，因此您可能必须在 IE7 中使用 jquery 来修复