div 안에있는 이미지의 수직 정렬

div 안에 이미지의 수직 정렬을 설정하고 싶습니다. img {vertical-align : middle} 을 사용하지만 작동하지 않습니다.div 안에있는 이미지의 수직 정렬

2011-03-25 Deepa

아마 관련 : http://stackoverflow.com/questions/3535689/text-in-vertical-of-div. – Blender

초보자로서 올바른 방향으로 당신을 가리키고 있으며 우리가 서로를 돕기 위해 일과 삶에서 시간을 낭비하고 있기 때문에 이러한 답변 중 일부에 대해 높은 투표를하고 싶을 수도 있습니다. –

문제를 해결합니다 line-height 속성을 사용 :

<style> 
.someclass { 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    line-height: 300px; 
    border: dotted; 
} 
.someclass img { 
    margin: auto; 
    vertical-align: middle; 
} 
</style> 
<div class="someclass"> 
    <img src="someimg.jpg" border="0" alt=""> 
</div>

출처

2011-03-25 06:15:37

이 코드를 사용하고 있지만 작동하지 않습니다. ie – Deepa

입니다. 즉, 확대 –

을 도입해야 할 수도 있습니다. 이는 표 셀을 표시하는 것과는 대조적으로 IE7의 매력처럼 작동합니다. 감사! –

당신이 다음 vertical-align: middle;이 작동 table-cell에 DIV display 속성을 설정합니다.

vertical-align 규칙은 표 셀 또는 요소에 영향을 주며 display: table-cell입니다.

자세한 내용은 this article from SitePoint을 참조하십시오.

<style> 
/* change body to .someClasses's parent */ 

body { 
    width: 100%; 
    height:  100%; 
    display: table; 
} 
body > .someclass { 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    border:dotted; 
    margin: 0 auto 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 

<body> 
    <div class="someclass"> 
     <img src="someimg.jpg" border="0" alt=""> 
    </div> 
</body>

출처

2011-03-25 06:23:17 xzyfer

나는이 코드를 사용하지만 작동하지 않는다. 먼저 자신을 시험해 보자. – Deepa

네 말이 맞아. 내가 뭔가 놓쳤다. 코드가 작동하도록 업데이트했습니다. 실제로 내가 게시 한 링크를 읽는 데 시간이 걸리는 경우 귀찮았 는데도이 문제를 이미 알아 차렸을 것입니다. 단순히 답을 구하기보다는 실제로 뭔가를 배우려고 노력하십시오. – xzyfer

display : table-cell이 작동하지 않습니다. – Deepa

제 생각에는 수직 정렬이 효과가 없을 것입니다. 당신은 포지셔닝을 사용해야합니다.

일반적으로 컨테이너를 상대적으로 배치 한 다음 위쪽과 왼쪽을 50 %로 설정하여 이미지의 절대 위치를 지정한 다음 음수 여백을 너비/높이의 절반으로 설정하여 이미지를 가운데로 다시 이동하십시오. http://jsbin.com/evuqo5/edit

기본 CSS는 이것이다 : 여기

는 작업 예제

다음 포스트는 몇 가지 유용한 참조가

#container { position: relative; } 
#container img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: /* -1/2 the height of the image */ 
    margin-left: /* -1/2 the width of the image */ 
}

출처

2011-03-25 06:31:38 RussellUresti

모든 이미지의 높이와 너비를 계산하지 않겠습니까? – Deepa

JavaScript 없이도 사용할 수있는 다른 솔루션을 게시 하겠지만 모든 브라우저에서 지원되지는 않습니다. – RussellUresti

니스! 그것은 매력처럼 작동합니다. 고맙습니다. – CHaP

: 버전의에 따라 또한

Text Alignment w/ IE9 in Standards-Mode

을, IE에 대해 테스트하고 있다면 일부 브라우저 관련 해킹 또는 일부 jQuery/JavaScript 코드가 필요할 수 있습니다.

필요한 경우 1 행 1 셀 테이블을 사용하고 vertical-align 속성을 활용하십시오. 이것은 지나치게 의미가 아닌 짐승 같은 힘이지만 작동합니다.

출처

2011-03-25 10:50:49

이것은 자바 스크립트가 필요없는 솔루션입니다 (이전의 솔루션과 동일).

포함 된 div에 display: table-cell을 할당하면 원하는 것을 얻을 수 있습니다. 다음은 그 예입니다. http://jsbin.com/evuqo5/2/edit

지원할 모든 브라우저에서이 기능을 테스트해야한다고 생각합니다. table-cell 값에 대한 지원은 특히 Firefox에서 새로 도입되었습니다. 나는 그것이 Firefox 4에서 작동한다는 것을 알고 있지만, 3.x 반복에 대해서는 모른다. 또한 IE에서 테스트하고 싶습니다 (Chrome 10 및 Firefox 4에서만 테스트했습니다).

CSS의가 : 수평으로 이미지를 정렬하는 방법도 원하지 않는 경우

div#container { 
    width: 700px; 
    height: 400px; 
    position: relative; 
    border: 1px solid #000; 
    display: table-cell; 
    vertical-align: middle; 
    } 
    div#container img { 
    margin: 0 auto; 
    display: block; 
    }

당신은 div#container img 스타일을 필요가 없습니다.

출처

2011-03-29 17:01:44 RussellUresti

내 경우와 같이 높이에 백분율을 사용해야하는 경우에는 작동하지 않습니다. –

이 awser를 참조하십시오 : 당신은 수평으로도 정렬 할 경우 How to vertical align image inside div

추가,이 같은 right 및 left :

div { 
    position:relative; 
} 
img { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
}

출처

2013-07-01 02:40:24 silviomoreto

이 크롬에서 작동하지 않습니다. –

div 안에있는 이미지의 수직 정렬

답변

관련 문제