Html 체크박스 가운데 정렬 - html chekeubagseu gaunde jeonglyeol

카페24 html - 체크박스와 텍스트 정렬하기

카페24 쇼핑몰 디자인스킨 전문 제작지원 하바나스 디자인입니다.

체크박스와 텍스트 정렬하기

카페24 쇼핑몰 스킨의 체크박스와 텍스트가 어긋나는 현상을 바로 잡는 방법입니다.

팝업창과 같이 "오늘하루 그만보기" 의 텍스트와 체크하는 체크박스가 어긋나서 짜증나는 경우가 있습니다.
이부분은 전문 퍼블리셔들도 크로스 브라우징에서도 맞추기 좀 어려운 부분이라고들 합니다.

여하튼 간단한 방법을 알아보면 이렇습니다.
일단 input박스와 텍스트를 하나의 라벨로 묶어 둡니다.
그래야 텍스트를 클릭하더라도 체크박스에 체크 표시가 들어오게 됩니다.
예>
<form name="pop_form1">
<label>
<div id="check"><input type="checkbox" name="chkbox1" value="checkbox" style="margin-right:5px;">오늘 하루동안 보지 않기</div>
<div id="close"><a href="javascript:closePop1();">닫기 X</a></div>
</label>
</form>
일반적인 css를 보게 되면
#check{ color:#fff; position:absolute; bottom:7px; left:10px; font:400 11px/15px 'Nanum Gothic','돋움'; }
#close{ position:absolute; bottom:7px; right:10px; font:400 11px/15px 'Nanum Gothic','돋움'; }
#close a { color:#fff;  }

체크박스와 클로즈 버튼에 대한 색상값이나 위치값을 주어 맞추게 됩니다.
그러나 체크박스는 텍스트와 일직선 상에 위치하지 않고 삐뚤어져 보이게 됩니다.

위의 이미지와 같이 정렬이 잘된 모습은 아닙니다.
같은 선상에서 보기 좋게 맞추려면..
input에 vertical-align css를 추가해주어 각각의 브라우져별로 적정하게 조정해주면 됩니다.
예)
#check input{ vertical-align:-3px; }

깔끔하게 정렬된 것을 확인하고 변경이 완료되었으면 저장 버튼을 클릭하시고 브라우져로 변경이 잘되었는지 확인합니다.

감사합니다.