정렬 할 인라인 블록을 가져올 수 없습니다.

".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>

출처

2013-07-06 Ben Pearce

당신은 img 태그 vertical-align: middle;를 사용뿐만 아니라 필요가 수정되어야한다 .name-wrap

Demo

관련 CSS :

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

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

출처

2013-07-06 05:06:17

CSS를 변경

.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-06 05:20:48

정렬 할 인라인 블록을 가져올 수 없습니다.

답변

관련 문제