최근 프로젝트에는 많은 양식 제작, 특히 체크 박스 및 라디오 박스가 포함됩니다. 그러나 프론트 엔드 개발 과정에서 단일 (복잡한) 확인란과 그 뒤에있는 프롬프트 텍스트는 설정 없이는 정렬 될 수 없으며 Firefox와 IE 사이에 큰 차이가있었습니다. 세로 정렬 : 중간이 설정 되더라도 여전히 완벽하게 정렬 할 수는 없습니다. 아래 그림과 같이 :
그래서 일부 웹 사이트를 온라인으로 확인한 결과 아래 그림 (FF3.5)과 같이이 문제가 일반적이라는 것을 알았습니다.
많은 웹 사이트에서는 양식 요소가 프롬프트 텍스트와 정렬 될 수 없다는 문제가 있습니다. 그래서 나는이 문제를 연구 할 계획입니다. 먼저, 나는 수석 Wheatlee의 "모든 사람이 수직 정상에 대한 모든 사람을 말합니다"라는 기사를 검색했습니다. 그의 기사에서 Wheatlee는 수직 센터링에 대한 몇 가지 핵심 사항을 언급했습니다.
1. 수직 정비 : 중간에 요소의 중심이 주변 요소의 중심과 정렬됩니다.
2. 여기의 중심의 정의는 다음과 같습니다. 그림은 물론 높이의 절반이며, 텍스트는 기준선, 즉 소문자 x의 중심에 따라 0.5ex로 이동해야합니다. 그러나 많은 브라우저는 종종 EX 단위를 0.5EM으로 정의하므로 반드시 X의 중심이 아닙니다 (기준선과 같은 명사를 이해하지 못하는 경우 Wheatlee의 기사를 먼저 읽으십시오).
이 아이디어에 따르면, 내가 직면 한 문제와 비교할 때, 가장 먼저 떠오르는 것은 브라우저가 확인란과 이미지에 동일한 규칙을 사용하여 렌더링하는지 여부를 확인하는 것입니다 (확인란을 정사각형 사진으로 취급하든). 그래서 나는 다음 코드를 썼습니다.
<스타일>
바디 {font-size : 12px;}
</스타일>
<입력 스타일 = 수직 정렬 : 중간; 이름 = 테스트 유형 = 확인란>
<IMG 스타일 = 수직 정렬 : 중간; src = testpic.gif />
테스트 텍스트
코드의 testpic.gif는 확인란과 정확히 같은 크기의 검은 색 그림입니다. 다음은 FF3.5에 표시됩니다.
이전 페이지 1 2 3 4 다음 페이지 전체 텍스트 읽기