1

「.name-wrap」divがこのフィドルの画像と一致しない理由を誰でも説明できますか?

<!DOCTYPE html>
<html>

<style>

.element-wrap{
    display:block;
    background:blue
}

.name-wrap{
    display:inline-block;
    background:yellow
}

.model-name-wrap{
    display:block
}

.make-name-wrap{
    display:block
}

img{
 display:inline-block   
}

</style>

<body>  
<div  class="element-wrap">
<img  height="50" width="50" src="https://fbcdn-photos-h-a.akamaihd.net/hphotos-ak-prn1/c8.0.50.50/p50x50/1012747_10100658463725213_1269934886_s.jpg">
<div  class="name-wrap">
<div class="model-name-wrap">Honda</div>
<div  class="make-name-wrap">Civic</div>
</div>
4

2 に答える 2

2

タグと同様に使用vertical-align: middle;する必要がありますimg.name-wrap

デモ

変更が必要な関連 CSS :

.name-wrap{
    display:inline-block;
    background:yellow;
    vertical-align: middle;
}

img{
   display:inline-block;
   vertical-align: middle;        
}
于 2013-07-06T05:06:17.773 に答える