1

こんにちは、次のコードが 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 内の画像は異なります (幅と高さが異なります)。基本的に、アイコンがあり、その横にテキストがあります。テキストを中央（縦）にしたいのですが、アイコンの高さがそれぞれ違うのでどうしたらいいのかわからない！私は何をすべきか？

ありがとう

4

2 に答える 2

1

これを試すことができます

.bio {
  display:table;
}

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

これに関する唯一の問題は、IE7 が css テーブル プロパティを認識しないため、IE7 で修正するには jquery を使用する必要がある場合があります。

于 2012-04-13T01:16:12.327 に答える
0

vertical-align プロパティを使用して、テキストを垂直方向に中央揃えにすることができますw3 link here

異なるサイズのアイコンの問題については、css で固定の幅と高さを使用してください

.bio-icon
{
  height:50px;
}

これにより、アイコン/画像のサイズが自動的に変更されます。

于 2012-04-13T01:10:15.747 に答える