CSS 수직 정렬은 약간

OK 떨어져, 그래서 이것은 나를 미치게된다 http://jsfiddle.net/C3YMJ/2/
이미지는 수직으로 div의 중심에 있기로되어 있지만, 당신이 볼 수 있듯이, 그것은 약간 오프 센터입니다. 나는 그것을 정확히 센터에 놓을 수 없다. 어떤 도움이라도 대단히 감사 할 것입니다.
감사합니다.CSS 수직 정렬은 약간

출처

2012-07-21 Abraham

, 그것의 유일한 강제하지 솔루션 ... – Luis

div { 
    position:relative; 
} 

img { 
    position:absolute; 
    top:0; 
    bottom:0; 
    margin:auto; 
}

JS 바이올린 : 수직 http://jsfiddle.net/C3YMJ/22/

당신은 JSW189의 답변을해야

출처

2012-07-21 13:57:32 JSW189

+1 정말 최고의 솔루션입니다. 부모의 키에 상관없이 정확하게 중심에 배치되고 작동합니다. – techfoobar

예! 마침내 뭔가 작동합니다. 감사합니다, JSW189! – Abraham

-1

코드가 작동하지 않습니다. 두 높이를 모두 높이면 중심에 있지 않습니다. http://jsfiddle.net/WouterJ/C3YMJ/3/

이 문제를 해결하는 방법에 대한 자세한 내용은 Chris Coyier의 Centering in the unkown 문서를 참조하십시오.

편집 : 잘못된 진술을 삭제하십시오.

출처

2012-07-21 13:40:49

을 -align은 테이블에만 적용되는 것이 아닙니다. – Rob

@Rob 미안하지만. 답변에서 삭제했습니다. 감사합니다. –

vertical-align 속성을 제거 할 수 있습니다. 이미지에 적용 할 수있는 하위 요소가 없으므로 아무런 영향을주지 않습니다.

div에 line-height: 20px;을 사용하십시오.

출처

2012-07-21 13:42:54 Guffa

나는 이것을보고있다. 잠깐만 기다려 봐. – Abraham

이게 도움이 될 것 같아서 고마워. – Abraham

단점은 div의 'height'가 변경되면'line-height'도 변경해야한다는 것입니다. – JSW189

DIV에 line-height: 100%을 추가하면 문제가 해결됩니다.

데모는 : http://jsfiddle.net/C3YMJ/9/

출처

2012-07-21 13:48:23 techfoobar

죄송합니다. 작동하지 않는 것 같습니다. http://jsfiddle.net/C3YMJ/19/ – Abraham

나는 DIV 오프 높이를 가지고 대신 상단과 하단에 패딩을 사용합니다.

html: <div><img src="https://www.google.com/images/srpr/logo3w.png" height="10" /></div> 
css: div {background-color: blue; padding: 5px 0;}

이렇게하면 중간에 정렬됩니다.

당신은 수직 이미지의 중심에 CSS position 속성을 사용할 수 있습니다

출처

2012-07-21 13:54:54 ckornell

CSS 수직 정렬은 약간

답변

관련 문제