居中图像

Question

您有以下代码适用三次：

<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 link here

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

.bio-icon
{
  height:50px;
}

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