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;forimg标签以及.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 回答
0

CSS 更改

http://jsfiddle.net/gwnN8/5/

.element-wrap{
    display:block;
    background:blue;
        float:left;
    width:100%;
}
.element-wrap img{
float:left;
}

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

.model-name-wrap{
    display:block
}

.make-name-wrap{
    display:block
}
于 2013-07-06T05:20:48.110 回答