최근 프로젝트에는 특히 체크박스와 라디오 등 다양한 형태의 제작이 포함됩니다. 그러나 프론트엔드 개발 과정에서 단일(다중) 체크박스와 그 뒤의 프롬프트 텍스트는 어떠한 설정 없이도 정렬될 수 없다는 사실이 발견되었으며, Firefox와 IE에는 큰 차이가 있습니다. 수직 정렬:중간을 설정하더라도 여전히 완벽하게 정렬되지는 않습니다. 아래와 같이:
그래서 온라인에서 일부 웹사이트를 확인한 결과 아래와 같이 이 문제가 흔히 발생한다는 사실을 발견했습니다(FF3.5).
양식과 관련된 많은 웹사이트 페이지에서는 양식 요소와 프롬프트 텍스트가 정렬되지 않는 문제가 있습니다. 그래서 저는 이 문제를 연구하기로 결정했습니다. 우선 휘틀리 선배님의 글 " 수직정렬에 대해서는 사람마다 의견이 다르다 "를 검색해봤습니다. Wheatlee는 자신의 기사에서 수직 센터링에 관해 다음과 같은 핵심 사항을 언급했습니다.
1. 수직 정렬:중간을 사용하면 요소의 중심이 주변 요소의 중심과 정렬됩니다.
2. 여기서 "중심"의 정의는 다음과 같습니다. 그림은 물론 높이의 절반이고 텍스트는 소문자 "x"의 정확한 중심인 기준선을 기준으로 0.5ex 위로 이동해야 합니다. 그러나 많은 브라우저에서는 단위 ex를 0.5em으로 정의하는 경우가 많기 때문에 이것이 반드시 x의 정확한 중심이 아닐 수도 있습니다. (기준선과 같은 용어를 이해하지 못하는 경우 Wheatlee의 기사를 먼저 읽어보십시오.)
이 아이디어에 따라 내가 겪은 문제를 비교하면서 가장 먼저 생각한 것은 브라우저가 "체크박스"와 이미지를 렌더링하는 데 동일한 규칙을 사용하는지(체크박스를 정사각형 이미지로 처리하는지 여부) 확인하는 것이었습니다. 그래서 다음 코드를 작성했습니다.
<스타일>
본문{글꼴 크기:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
테스트 텍스트
코드의 testpic.gif는 확인란과 동일한 크기의 검은색 그림입니다. FF3.5에서의 디스플레이는 다음과 같습니다:
