이미지 수직 정렬 문제

일부 텍스트와 수직으로 정렬 할 이미지가 있습니다. 이미지에 경계선이없고 간격이 없으며 제대로 자릅니다. 그러나 그것은 IE와 Firefox에서 다르게 정렬됩니다. 이유는 알 수 없습니다. IE에서이미지 수직 정렬 문제

정렬 : FF에서

alt text

정렬 : FF에서, X 박스는 텍스트의 바닥과 수평이 얼마나

alt text

알 수 있습니다.

<div id="Header"> 
    <a href="#" onclick="return false;">Close</a> 
    <a href="#" onclick="return false;"><img src="App_Themes/Dark/images/close-button.gif" alt="Close" style="border-width:0px;" /></a> 
</div>

그리고 같은 스타일 시트의 관련 부분은 같습니다 : 내가 사용하고있는 HTML은 내가 이미지 요소 블록 요소를함으로써 과거에이 문제를 처리 한

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

있지만, 이미지가 컨테이너의 유일한 요소 일 때만 작동합니다. 이 문제를 어떻게 해결할 수 있습니까?

출처

2009-11-30 Chris

이미지를 헤더 div의 배경 이미지로 사용할 수 있습니까? 그렇다면 배경 위치를 가질 수 있습니다 : 중심점; – Zoidberg

방금 문제가 생겨서 3 시간을 잃었습니다. 감사. – Marcelo

임의의 생각 :

왜 인라인 블록,해야하지 인라인으로이 작품?
x에 여백이나 여백이있을 수 있습니까? Firebug로 확인할 수 있습니까?
"중간"으로 잘못 정렬하지 않았습니까? 베이스 라인을 기준으로 정렬한다고 가정 할 때 "기준선"이되어서는 안됩니까?
두 개의 <a> 태그를 하나로 병합하면 어떻게 될까요?

출처

2009-11-30 19:26:10

인라인 블록은 아무 효과가없는 시도 된 수정 프로그램입니다. 방화범이 끌리지 않는다고보고합니다. 나는 실제로 그것을 중앙 정렬 싶어요. 나는 그 차이를 보여주기위한 기준선을 지적했다. 두 태그를 하나의 태그로 병합 할 때 아무 일도 일어나지 않습니다. – Chris

이상합니다. 구식의 "align = 'absmiddle'"를 사용하면 어떤 변화가 일어날지를보기 위해 어떤 일이 일어날 수 있습니까? –

나는 엄격한 표준 모드에서이 테스트를

#Header { 
    vertical-align: middle; 
}

참고하십시오. 그것은 IE6에 영향을 미치지 않는 것 같았지만 이미지를 IE8과 FF3로 옮겼습니다.

출처

2009-11-30 20:31:37

인라인 블록이 필요하지 않습니다. 이미지를 표시 할 기본 표시 값으로 캐스케이드에서 상위 값을 재설정하지 않으면 효과가없는 것입니다.

Firebug에 대한 데모 페이지를 볼 수 없으므로 글꼴 크기를 추측하여 줄 크기가 다릅니다. 컨테이너 요소 또는 a 태그의 행 높이를 지정하십시오. 브라우저에서 line-heights가 다른 경우 (매우 잘), "중간"및 위의 youre 정렬은 "baseline"이 이론상으로 브라우저/글꼴 크기/줄 간격/신장.

출처

2009-11-30 21:53:01 prodigitalson

이미지 수직 정렬 문제

답변

관련 문제