센터 왼쪽 부유하고 최소 높이

내가 floated left 인 div 내부 vertically center에 이미지를 시도하고 있으며, 그 150px의 min-height을 가지고 있습니다 사업부에서 수직으로 이미지;센터 왼쪽 부유하고 최소 높이

문제는 없지만 노력하고 있습니다. 나는 에 display:table을 사용하고 내부에는 display:table-cell을 사용했지만 모든 것이 동일하게 유지되었습니다.

div 내부에 나타나는 이미지의 높이는 고정되어 있지 않지만 서버에서는 150px로 축소됩니다.

어떻게 작동합니까?

![<!DOCTYPE HTML> 
<html> 
<head> 
    <title>The annoying image</title> 
</head> 
<body> 

<div style="border:1px solid #ddd; float:left; height:150px; padding:10px; display: table;"> 
    <img src="/imgur/us/thumb_1.jpg" style="display: table-cell; vertical-align: middle; text-align: center;"> 
</div> 

</body> 
</html>

여기

A fiddle

출처

2014-07-19 Norman

enter image description here

enter image description here 바이올린의 : http://jsfiddle.net/Cq48L/

HTML

,536,913 63,210

<div class="outer"> 
    <span class="helper"></span> 
    <img src="http://i.stack.imgur.com/e0Snp.jpg"> 
</div>

CSS

.outer { 
    border:1px solid #ddd; 
    float:left; 
    height:150px; 
    padding:10px; 
    display: table; 
} 

.outer img { 
    vertical-align: middle; 
} 
.helper { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
}

확인이 아니라 답변 :이 같은 https://stackoverflow.com/a/18516474/3603806 및 https://stackoverflow.com/a/7310398/3603806

출처

2014-07-19 15:03:56

멋진 대답,하지만 당신은 도우미 요소를 제거 할 수 있습니다 : http://jsfiddle.net/Cq48L/4/http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height + 'display : table;에 대한 필요가 없습니다. –

@ 니코 좋은 접근 방식이지만 IE에서 실패합니다 (IE9를 사용하고 있습니다). – Norman

@NicoO 및 Firefox too ... – Norman

센터 왼쪽 부유하고 최소 높이

답변

관련 문제