사파리와 파이어 폭스에서 div 차이가있는 세로 중심 이미지

현재 Safari와 Firefox에서 이것을 비교하고 있습니다. div 안에있는 작은 이미지로 세로로 가운데에 맞춰야합니다. http://dl.getdropbox.com/u/340087/Drops/09.23.09/so-03f73322-164033.html 사파리와 파이어 폭스에서 div 차이가있는 세로 중심 이미지

이것은 아마 훨씬 더 간단하다 : 여기

내가 아래로 증류 한 간단한 테스트 케이스이다 http://dl.getdropbox.com/u/340087/drops/09.23.09/align-42fc19f2-154007.html

1) 나는 순서대로 이미지 후 공간이 필요합니까 왜 어떤 CSS를 작동 시키세요?

2) Safari를 완벽하게 센터링하려면 무엇을 할 수 있습니까? 1-2px가 너무 낮아서 본질적으로 이미지의 상단을 텍스트로 줄이십시오.

감사

출처

2009-09-23 user170579

이미지는 인라인 요소로 간주되므로 기본적으로 텍스트로 처리됩니다.

브라우저간에 정확한 위치를 지정하려면 가장 안전한 방법은 이미지를 인라인 img 요소가 아닌 배경으로 사용하는 것입니다.

출처

2009-10-08 03:26:56 Stephen

보편적 인 선택하십시오 :

div * { vertical-align: middle }

또는 오래된 학교를 갈 (당신이 할 수있는 경우) 및 테이블을 사용?

사파리가 텍스트를 렌더링하는 방식 때문에 Safari (Mac) 및 브라우저에서 항상 약간의 픽셀 차이가 있습니다. 그것에 대해 읽어보십시오 here.

출처

2009-09-24 05:42:08 3zzy

그래, 그 수직 정렬 내가 사용하고 있으며, 그것은 약간 떨어져 있습니다. bg 이미지를 가운데로 설정하여 CSS 선언을 찾는 것이 내가 원하는 것을 얻는 완벽한 방법입니다. 링크를 가져 주셔서 감사합니다. – user170579

*는 텍스트 노드가 아닌 요소 만 일치하므로 텍스트를 스팬으로 묶어야합니다. 내 대답도 참조하십시오. – Stewart

텍스트를 스팬에 포함하고 수직 정렬을 적용합니다.

HTML 코드 :

<div class="right"> 
    <img src="action_check.png" width="16" height="16" class="status" alt="Data Ok" /> 
    <span>Chose a User Name</span> 
</div>

CSS 추가 : FF, IE, 사파리, 크롬과 오페라 (윈도우)의 최신 버전에서 테스트

span { vertical-align: middle; }

출처

2009-10-08 23:42:11 Stewart

사파리와 파이어 폭스에서 div 차이가있는 세로 중심 이미지

답변

관련 문제