center - 居中图像

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 表属性，因此您可能必须使用 jquery 在 IE7 中修复

Answer 2

您可以使用 vertical-align 属性将文本垂直居中w3 链接here

对于不同大小的图标问题，在 css 中使用固定的宽度和高度

.bio-icon
{
  height:50px;
}

这将自动调整您的图标/图像的大小。