Question

任何人都可以解释为什么“.name-wrap”div没有与此fiddle中的图像对齐。

<!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>

Answer 1

您需要vertical-align: middle;用于img代码以及.name-wrap

Demo

必须修改的相关CSS：

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

img{
   display:inline-block;
   vertical-align: middle;        
}

Answer 2

css change

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
}

无法使内联块对齐

2 个答案: