div 내에서 img 요소를 수직으로 정렬

div 내에서 ing 요소를 수직으로 정렬하려고합니다. 문제는 img 요소에 고정 된 높이가 없다는 것입니다. 테이블, 테이블 셀 및 인라인 블록 및 인라인과 함께 세로 정렬을 시도했습니다. 이 중 아무 것도 작동하지 않는 것 같습니다. 아무도 내가 이것을 어떻게 달성 할 수 있을지 전혀 모른다. 내 문제를 재현하는 JSFiddle을 만들었습니다.div 내에서 img 요소를 수직으로 정렬

JsFiddle : http://jsfiddle.net/6gMcK/1/

HTML :

<div id="image-container"> 
    <img src="http://www.image2012.com/images/2013/03/landscapes-landscape-free.jpg"> 
</div>

CSS :

#image-container { 
    padding:5px; 
    height: 135px; 
    border: 1px solid black; 
    display: table; 
    float:left; 
} 

#image-container img{ 
    display: table-cell; 
    max-height:125px; 

    vertical-align: middle; 
}

출처

2013-04-24 Frank Kluytmans

을 시도 컨테이너에 line-height = container_height_px을 적용 할 수 /stackoverflow.com/questions/7336503/how-to-vertical-align-image-inside-div - 또한 귀하의 사양을 귀하의 바이올린을 업데이 트 http://jsfiddle.net/6gMcK/2/ –

@limelights 나는 이것이 대답이 ... –

@MarcelGwerder 아니, 다른 모든 것들이 그것의 사본이기 때문에 이것이 질문을하기 전에 파 냈어 야한다고 나는 믿는다. 나는 중복을 믿지 않거나 대답을 복사하지 않습니다. –

변경 일부 속성 등이

#image-container { 
    padding: 5px; 
    height: 135px; 
    border: 1px solid black; 
    display: table-cell; 
    vertical-align: middle; 
} 

#image-container img{ 
    max-height: 125px; 
    display: block; 
}

같은

Live Demo

출처

2013-04-24 08:44:52

내가 자주 사용하는 솔루션은 이미지가 이미지 컨테이너의 배경이 될 것입니다. 이 방법으로 너비와 높이를 설정하고 컨테이너의 이미지와 크기에 대해 약간의 절대 위치 지정을하고 전체 이미지를 항상 표시 할 수 있습니다.

#image-container { 
    position:absolute; 
    left:30%; 
    right:30%; 
    min-width:135px; 
    height: 135px; 

    border: 1px solid black; 
    background-image:url('image.png'); 
    background-size:contain; 
    background-repeat:no-repeat; 
    background-position:center; 
}

당연히 너는 너의 필요에 따라 너비 값을 가지고 놀 수있다. 나는 항상 이것을 이미지를 표시하는 간단한 해결책으로 생각했다. HTTP :/당신은 단지 컨테이너에 하나 개의 이미지를 가지고 있고, 컨테이너가 고정 된 높이가있는 경우

출처

2013-04-24 09:48:17

참고 사항 : CSS3 속성이므로이 솔루션은 최신 브라우저에서는 작동하지만 IE <9에서는 작동하지 않습니다. – skobaljic

, 당신은 단순히

여기 방법 읽기이 demo

출처

2013-04-24 09:55:27 Danield

img-container 높이를 100px로 줄이면 이미지가 정확히 수직으로 가운데 정렬되지 않는 경우가 있습니다 (일부 경우 성가심 일 수 있음). 수직 센터링을위한 최상의 크로스 브라우저 솔루션은 이전 테이블을 사용하고 img display : 블록을 제공하는 것입니다. 그것은 20 세기 브라우저에서도 작동 할 것입니다. – skobaljic

질문은 컨테이너가 가변 높이를 가지고 있다고 말하지 않았고 ** img **는 가변 높이 – Danield

div 내에서 img 요소를 수직으로 정렬

답변

관련 문제