이것은 끊임없이 저를 괴롭히는 사소한 CSS 문제 중 하나입니다. Stack Overflow를 둘러싼 사람들은 어떻게 수직 정렬 checkboxes하고 labels일관되게 브라우저를 교차 합니까? I (일반적으로 사용하는 Safari에서 올바르게 정렬 할 때마다 vertical-align: baseline온 input), 그들은 파이어 폭스와 IE에서 떨어져 완전히입니다. Firefox에서 수정하면 Safari와 IE가 필연적으로 엉망이됩니다. 양식을 작성할 때마다 시간을 낭비합니다.

내가 작업하는 표준 코드는 다음과 같습니다.

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

나는 보통 Eric Meyer의 재설정을 사용하므로 양식 요소는 대체로 비교적 깨끗합니다. 당신이 제공해야 할 팁이나 트릭을 기대합니다!

한 시간 이상 조정, 테스트 및 다양한 스타일의 마크 업을 시도한 후 적절한 해결책이 있다고 생각합니다. 이 특정 프로젝트의 요구 사항은 다음과 같습니다.

1. 입력은 자체 라인에 있어야합니다.
2. 확인란 입력은 모든 브라우저에서 비슷하게 (동일하지 않은 경우) 레이블 텍스트와 세로로 정렬되어야합니다.
3. 레이블 텍스트가 줄 바꿈되면 들여 쓰기가 필요합니다 (확인란 아래 줄 바꿈 없음).

설명을하기 전에 코드를 알려 드리겠습니다.

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

다음은 JSFiddle 의 실제 예제입니다 .

이 코드는 양식 입력 여백과 패딩을 재정의하지 않는 Eric Meyer와 같은 재설정을 사용한다고 가정합니다 (따라서 입력 CSS에 여백과 패딩 재설정을 넣음). 분명히 실제 환경에서는 다른 입력 요소를 지원하기 위해 물건을 중첩 / 재정의하는 것이지만 간단하게 유지하고 싶었습니다.

참고 사항 :

• *overflow선언은 인라인 IE 해킹 (스타 재산권 해킹)입니다. IE 6과 7은이를 인식하지만 Safari와 Firefox는이를 무시합니다. 나는 그것이 유효한 CSS 일 것이라고 생각하지만, 조건부 주석을 사용하는 것이 여전히 낫습니다. 간단하게 사용했습니다.
• 내가 알 수있는 한, vertical-align브라우저에서 일관된 유일한 진술은 vertical-align: bottom입니다. 이것을 설정 한 다음 상대적으로 위쪽으로 배치하면 Safari, Firefox 및 IE에서 픽셀 또는 불일치가 거의 동일하게 거의 동일하게 작동합니다.
• 정렬 작업의 주요 문제점은 IE가 입력 요소 주위에 신비한 공간을 많이 가지고 있다는 것입니다. 패딩이나 여백이 아니며 지속적으로 저주됩니다. 확인란에 너비와 높이를 설정 한 다음 overflow: hidden어떤 이유로 든 여분의 공간이 차단되고 IE의 위치가 Safari 및 Firefox와 매우 유사하게 작동합니다.
• 텍스트 크기에 따라 적절한 위치를 잡기 위해 상대 위치, 너비, 높이 등을 조정해야 할 것입니다.

이것이 다른 누군가를 돕기를 바랍니다! 오늘 아침에 작업 한 프로젝트 이외의 다른 프로젝트에서는이 특정 기술을 시도하지 않았으므로보다 일관된 방식으로 작동하는 항목을 찾으면 확실히 정리하십시오.

때로는 세로 정렬이 제대로 작동하려면 서로 옆에 두 개의 인라인 (스팬, 레이블, 입력 등) 요소가 필요합니다. 다음 확인란은 텍스트 크기가 매우 작거나 큰 경우에도 IE, Safari, FF 및 Chrome에서 세로로 올바르게 가운데에 표시됩니다.

그것들은 모두 같은 줄에서 서로 옆에 떠 있지만, 이제 줄 바꿈은 전체 레이블 텍스트가 항상 확인란 옆에 유지됨을 의미합니다.

단점은 의미없는 여분의 SPAN 태그입니다.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

이제 확인란 아래에 줄 바꿈없이 줄 바꿈 해야하는 매우 긴 레이블 텍스트가 있는 경우 레이블 요소에 패딩 및 음수 텍스트 들여 쓰기를 사용합니다.

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

의 해제 작업을 한 크레용의 솔루션 , 내가 나를 위해 작품과 간단이라고 뭔가를 :

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Safari (기준으로 신뢰하는)에서 픽셀 단위로 픽셀을 동일하게 렌더링하며 Firefox와 IE7 모두 양호하게 체크 아웃합니다. 또한 크고 작은 다양한 레이블 글꼴 크기에서도 작동합니다. 이제 선택 및 입력에서 IE의 기준을 수정하기 위해 ...

업데이트 : (타사 편집)

올바른 bottom위치는 글꼴 모음 및 글꼴 크기에 따라 다릅니다! bottom: .08em;확인란 및 라디오 요소에 사용하는 것이 좋은 일반적인 값이라는 것을 알았습니다 . 몇 가지 작은 / 중간 / 큰 글꼴 크기를 사용하여 Arial & Calibri 글꼴이있는 Windows의 Chrome / Firefox / IE11에서 테스트했습니다.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

잘 작동하는 한 가지 쉬운 방법은 세로 정렬로 확인란의 세로 위치 조정을 적용하는 것입니다. 브라우저마다 여전히 다양하지만 솔루션은 복잡하지 않습니다.

input {
    vertical-align: -2px;
}

참고

시험 vertical-align: middle

또한 코드는 다음과 같아야합니다.

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

내 솔루션을 시도하고 IE 6, FF2 및 Chrome에서 시도한 결과 세 브라우저 모두에서 픽셀 단위로 렌더링됩니다.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

나를 위해 완벽하게 작동하는 유일한 솔루션은 다음과 같습니다.

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

오늘 Chrome, Firefox, Opera, IE 7 및 8에서 테스트되었습니다. 예 : 바이올린

내 솔루션을 완전히 테스트하지는 않았지만 훌륭하게 작동하는 것 같습니다.

내 HTML은 간단합니다.

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

그런 다음 모든 확인란을 24px높이와 너비 모두 로 설정했습니다 . 텍스트를 정렬하려면 레이블 line-height도 만들고 다음 24px과 vertical-align: top;같이 할당하십시오 .

편집 : IE 테스트 후 vertical-align: bottom;입력에 추가 하고 레이블의 CSS를 변경했습니다. 패딩을 정렬하기 위해 조건부 IE CSS 케이스가 필요할 수 있지만 텍스트와 상자는 인라인입니다.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

이것이 작동하지 않는 것을 발견하면 친절하게 알려주십시오. 다음은 실제로 작동합니다 (Chrome 및 IE에서-스크린 샷이 망막에서 촬영되고 IE에서 병렬을 사용하는 것에 대한 사과) :

정적 텍스트의 세로 위치를 조정하기 위해 일반적으로 줄 높이를 사용합니다.

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

희망이 도움이됩니다.

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

트릭은 레이블 태그를 사용하는 경우 테이블 셀 또는 인라인 블록에서만 세로 정렬을 사용하는 것입니다.

마지막으로 문제의 원인을 살펴 보자

확인란은 이미지를 사용하여 렌더링됩니다 (CSS를 통해 사용자 지정 확인란을 설정할 수 있음). 다음은 FireFox의 (확인되지 ​​않은) 확인란이며 DOM 관리자로 강조 표시되어 있습니다.

다음은 Chrome의 스타일이 지정되지 않은 동일한 확인란입니다.

여백 (주황색)을 볼 수 있습니다. 패딩이 없습니다 (녹색으로 표시됨). 이 의사 마진은 확인란의 오른쪽과 아래쪽에 무엇입니까? 이것은 확인란에 사용 된 이미지의 일부입니다 . 그렇기 때문에 사용하는 것만으로 vertical-align: middle는 충분하지 않으며 브라우저 간 문제의 원인입니다.

그래서 우리는 이것에 대해 무엇을 할 수 있습니까?

한 가지 확실한 옵션은 이미지를 교체하는 것입니다. 운 좋게도 CSS를 통해이 작업을 수행 할 수 있으며 외부 이미지, base64 (CSS 내) 이미지, CSS 내 svg 또는 유사 요소로 대체 ​​할 수 있습니다. 강력한 (브라우저 간) 접근 방식 이며이 질문 에서 도난당한 조정의 예는 다음과 같습니다.

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

여기에 나열된 것과 같은 스타일링에 대한 더 자세한 기사를 읽으 십시오 . 이 답변의 범위를 벗어납니다.

좋아, 여전히 커스텀 이미지 또는 의사 요소 솔루션은 어떻습니까?

TL; DR : 작동하지 않는 것 같습니다. 대신 맞춤 확인란을 사용하십시오.

먼저, 다른 브라우저에서 확인란 아이콘 안에있는 의사 마진이 임의적이라면 일관된 솔루션이 없었습니다. 하나를 구축하려면 기존 브라우저에서 이러한 이미지의 구조를 탐색해야합니다.

그렇다면 어떤 브라우저에서 의사 마진이 확인란에 있습니까? Chrome 75, Vivaldi 2.5 (Chromium 기반), FireFox 54 (이러한 오래된 이유는 묻지 않음), IE 11, Edge 42, Safari를 확인했습니다 ?? (1 분 동안 빌려 왔으며, 버전을 확인하는 것을 잊었습니다). Chrome과 Vivaldi에만 의사 마진이 있습니다 (오페라와 같은 모든 Chromium 기반 브라우저도 의심됩니다).

그 의사 마진의 크기는 얼마입니까? 이것을 알아 내기 위해 확대 확인란을 사용할 수 있습니다.

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

내 결과는 너비 / 높이의 ~ 7 %이므로 절대 단위로 0.9-1.0px입니다. 그러나 정확성에 의문이 생길 수 있습니다 zoom. 확인란에 다른 값을 사용해보십시오 . Chrome과 Vivaldi에서의 테스트에서 의사 마진의 상대 크기는 zoom값 10, 20과 값 11-19 (??)에서 매우 다릅니다 .

scale 더 일관된 것으로 보입니다.

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

~ 14 %와 2px가 올바른 값일 것입니다.

이제 의사 마진의 크기를 알고 있습니까 (?), 이것만으로는 충분하지 않습니다. 확인란 브라우저의 크기가 모든 브라우저에서 동일합니까? 아아! 스타일이 지정되지 않은 확인란에 대해 DOM 관리자가 표시하는 내용은 다음과 같습니다.

• FireFox : 13.3 픽셀
• 크롬 기반 : 전체적으로 12.8px , 확인란으로 시각적으로 인식되는 것의 경우 12.8 (100 %-14 %) = 11px
• IE 11, Edge : 13 픽셀
• 사파리 : 해당 없음 (동일한 화면에서 비교해야합니다.)

이제 해결책이나 요령을 논의하기 전에 다음과 같이 물어보십시오. 올바른 정렬이 무엇입니까? 우리는 무엇을 달성하려고 노력하고 있습니까? 어느 정도까지는 맛의 문제이지만 기본적으로 다음과 같은 "좋은"정렬의 측면을 생각할 수 있습니다.

동일한 기준에 텍스트와 확인란을 선택합니다 (고의적으로 확인란 크기를 조정하지 않음).

또는 소문자로 같은 중간 줄을 갖습니다.

또는 대문자로 같은 중간 줄 (다른 글꼴 크기의 차이점을 쉽게 볼 수 있음) :

또한 확인란의 크기가 소문자, 대문자 또는 다른 것 (더 크거나 작거나 소문자와 대문자 사이)의 높이와 같아야하는지 여부를 결정해야합니다.

이 토론을 위해 확인란이 텍스트와 동일한 기준선에 있고 대문자 크기를 갖는 경우 (논쟁의 여지가있는 선택) 정렬을 멋지게 호출합시다.

이제 어떤 도구를 사용해야합니까?

1. 확인란 크기 조정
2. 의사 마진 체크 박스로 Chromium을 인식하고 특정 스타일 설정
3. 확인란 / 레이블 수직 정렬 조정

?

1. 에 관한 체크 박스 크기 조정 :가 width, height, size, zoom, scale(내가 뭔가를 놓친?). zoom그리고 scale(우리는 브라우저 별 규칙을 작성할 수 있습니다하지 않는 한) 그들은 단지 텍스트 크기, 설정되지 크로스 브라우저 크기 조절에 도움이 될 수 있도록, 절대 크기를 설정하는 것을 허용하지 않습니다. sizeChrome에서는 작동하지 않습니다 (이전 IE에서는 작동 했습니까? 어쨌든 흥미롭지 않습니다). width및 height작업 크롬과 다른 브라우저에서, 그래서 우리는 크롬에 전체 이미지의 크기가 아니라 체크 박스 자체를 설정하고, 다시 공통의 크기를 설정할 수 있지만. 참고 : 확인란의 크기를 정의하는 최소값 (너비, 높이)입니다 (너비 ≠ 높이 인 경우 확인란 사각형 외부 영역이 "의사 마진"에 추가됨).

   불행히도 Chrome의 의사 여백 확인란은 내가 볼 수있는 한 너비와 높이에 대해 0으로 설정되어 있지 않습니다.

2. 요즘 신뢰할 수있는 CSS 전용 방법 이 없다는 것이 두려워요 .

3. 수직 정렬을 고려해 봅시다. Chrome의 의사 마진으로 vertical-align설정 middle하거나 baselineChrome 의사 마진으로 인해 일관된 결과를 제공 할 수없는 경우 , 모든 브라우저에 대해 동일한 "좌표계"를 얻는 유일한 방법은 레이블과 입력을 다음에 맞추는 것입니다 top.

   

   (그림에서 : 수직 정렬 : 상자 그림자없이 위쪽, 아래쪽 및 아래쪽)

그래서 우리는 이것으로부터 어떤 결과를 얻습니까?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

위의 스 니펫은 Chrome (Chromium 기반 브라우저)에서 작동하지만 다른 브라우저에서는 더 작은 크기의 확인란이 필요합니다. Chromium의 확인란 이미지 문제를 해결하는 방식으로 크기와 세로 정렬을 모두 조정하는 것은 불가능한 것 같습니다. 마지막 제안은 사용자 정의 확인란을 대신 사용하면 좌절을 피할 수 있습니다. :)

이제 flexbox는 모든 최신 브라우저에서 지원되므로 다음과 같은 것이 더 쉬운 접근 방식 인 것 같습니다.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

완전한 접두사 버전 데모는 다음과 같습니다.

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

이것이 가장 쉬운 방법이라고 생각합니다

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

상대적 위치 지정은 마음에 들지 않습니다. 요소가 레벨의 다른 모든 요소 위에 렌더링되기 때문에 (복잡한 레이아웃이있는 경우 무언가 위에있을 수 있습니다).

vertical-align: subChrome, Firefox 및 Opera에서 확인란이 잘 정렬되어 있음을 발견했습니다 . MacOS가 없어서 Safari를 확인할 수 없으며 IE10이 약간 꺼져 있지만 나에게 충분한 해결책이라는 것을 알았습니다.

또 다른 해결책은 모든 브라우저에 대해 특정 CSS를 작성하고 % / pixels / EM의 세로 정렬로 미세 조정하는 것입니다. http://css-tricks.com/snippets/css/browser-specific-hacks/

이것은 나를 위해 잘 작동합니다 :

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

400 개 이상의 upvotes를 사용하여 선택한 답변이 Chrome 28 OSX에서 작동하지 않았습니다. 아마도 OSX에서 테스트되지 않았거나이 질문에 대한 답변이있을 때 2008 년 주위 어느 곳에서도 작동했을 것입니다.

시대가 바뀌었고 새로운 CSS3 솔루션이 가능해졌습니다. 내 솔루션은 의사 요소 를 사용하여 사용자 정의 확인란 을 만듭니다 . 따라서 규정 (단, 장단점을 보더라도)은 다음과 같습니다.

• 최신 브라우저에서만 작동합니다 (FF3.6 +, IE9 +, Chrome, Safari)
• 모든 브라우저 / OS에서 똑같이 렌더링되는 사용자 정의 디자인 확인란에 의존합니다. 여기서는 간단한 색상을 선택했지만 항상 선형 그라디언트를 추가하여 강렬한 느낌을 줄 수 있습니다.
• 특정 글꼴 / 글꼴 크기에 맞춰져 있으며 변경하면 확인란의 위치와 크기를 변경하여 세로로 표시되도록합니다. 올바르게 조정하면 모든 브라우저 / 운영 체제에서 최종 결과가 정확히 동일해야합니다.
• 수직 정렬 속성 없음, 수레 없음
• 예제에서 제공된 마크 업을 사용해야합니다. 질문처럼 구성된 경우에는 작동하지 않지만 레이아웃은 본질적으로 동일하게 보입니다. 사물을 옮기려면 관련 CSS도 움직여야합니다.

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

이 솔루션 은 확인란을 숨기고 의사 요소를 레이블에 추가하고 스타일을 지정하여 보이는 확인란을 만듭니다. 레이블이 숨겨진 확인란에 묶여 있기 때문에 입력 필드가 계속 업데이트되고 값이 양식과 함께 제출됩니다.

그리고 관심이 있으시다면 여기 라디오 버튼을 클릭하십시오 : http://jsfiddle.net/DtKrV/2/

누군가가 이것을 유용하게 사용하기를 바랍니다!

나는 이런 식으로하는 데 아무런 문제가 없었습니다.

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

ASP.NET Web Forms 를 사용하는 경우 DIV 및 기타 요소 또는 고정 크기에 대해 걱정할 필요가 없습니다. CSS에서 CheckboxList 입력 유형 <asp:CheckBoxList>으로 설정 하여 텍스트를 정렬 할 수 있습니다 float:left.

다음 예제 코드를 확인하십시오.

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX 코드 :

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

Twitter Bootstrap을 사용하는 경우 다음 checkbox클래스를 사용할 수 있습니다 <label>.

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

입력 유형 확인란을 레이블 안에 싸서 다음과 같이 왼쪽으로 띄웁니다.

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

이것은 나를 위해 일했다 :

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

의 높이가 (blocklevel)의 행 높이와 동일해야합니다.

확인란의 높이와 너비를 하드 코딩하고 패딩을 제거한 다음 높이와 세로 여백을 레이블의 선 높이와 동일하게 만듭니다. 레이블 텍스트가 인라인 인 경우 확인란을 띄웁니다. Firefox, Chrome 및 IE7 +는 모두 다음 예제를 동일하게 렌더링합니다. http://www.kornea.com/css-checkbox-align

나는 보통 체크 박스에 레이블을 붙이지 않고 "라벨"을 별도의 요소로 만듭니다. 그것은 고통 스럽지만 확인란과 레이블이 표시되는 방식 (브라우저가 눈에 띄는) 사이에는 브라우저 간 차이가 너무 커서 모든 것이 어떻게 보이는지 제어 할 수있는 유일한 방법입니다.

또한 같은 이유로 winforms 개발 에서이 작업을 수행합니다. 확인란 컨트롤의 근본적인 문제는 실제로 상자와 레이블이라는 두 가지 컨트롤이라는 것입니다. 확인란을 사용하면 컨트롤의 구현 자에게 두 요소가 서로 옆에 표시되는 방식을 결정하도록 할 수 있습니다.

나는 누군가가 당신의 질문에 더 나은 답변을 갖기를 바랍니다.

CSS :

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML :

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

위의 코드는 목록 항목을 threecols에 배치하고 너비를 적합하게 변경합니다.

다음은 브라우저, 심지어 IE9에서 완벽한 픽셀 일관성을 제공합니다.

이 접근법은 명백한 시점까지 상당히 합리적입니다.

1. 입력과 레이블을 작성하십시오.
2. 그것들을 블록으로 표시하여 원하는대로 플로트 할 수 있습니다.
3. 높이와 선 높이를 같은 값으로 설정하여 세로로 가운데에 정렬되도록합니다.
4. 들어 EM의 측정 요소의 높이가, 브라우저가 해당 요소의 글꼴의 높이를 알고 있어야 계산하고, 그 자체가 그들 측정에서 설정하지 않아야합니다.

결과적으로 전 세계적으로 적용되는 일반 규칙이 적용됩니다.

input, label {display:block;float:left;height:1em;line-height:1em;}

양식, 필드 세트 또는 요소별로 글꼴 크기를 조정할 수 있습니다.

#myform input, #myform label {font-size:20px;}

Mac, Windows, Iphone 및 Android의 최신 Chrome, Safari 및 Firefox에서 테스트되었습니다. 그리고 IE9.

이 방법은 한 줄의 텍스트보다 크지 않은 모든 입력 유형에 적용 할 수 있습니다. 적합한 유형 규칙을 적용하십시오.

그래서 나는 이것이 여러 번 대답되었다는 것을 알고 있지만 이미 제공된 것보다 더 우아한 해결책이 있다고 생각합니다. 하나의 우아한 솔루션뿐만 아니라 2 개의 개별 솔루션으로 멋진 경험을 간질입니다. 그 말로, 당신이 알고보고해야 할 모든 것은 주석과 함께 2 JS Fiddle에 포함되어 있습니다.

솔루션 # 1은 주어진 브라우저의 기본 "체크 박스"에 의존하지만 트위스트 ... 브라우저를 쉽게 배치 할 수있는 div에 포함되어 있습니다. (이것은 FF의 추악한 테두리를 볼 수 없도록합니다)

간단한 HTML : (설명으로 CSS를 검토하려면 링크를 따르십시오. 코드 블록은 스택 오버 플로우 를 충족시키는 것입니다) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

솔루션 # 2는 "체크 박스 토글 해킹"을 사용하여 브라우저에 올바르게 배치 된 DIV의 CSS 상태를 토글하고 체크 박스를 선택하지 않고 체크 한 상태에 대한 간단한 스프라이트로 설정합니다. Checkbox Toggle Hack으로 배경 위치를 조정하기 만하면됩니다. 내 의견으로는 확인란과 라디오를 더 많이 제어하고 브라우저에서 동일하게 보이게 할 수 있으므로 더 우아한 솔루션입니다.

간단한 HTML : (링크를 따라 주석으로 CSS를 검토하십시오. 코드 블록은 StackOverflow를 충족시키는 것입니다) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

누군가이 방법에 동의하지 않으면 의견을 남겨주세요. 다른 사람들이 왜이 솔루션을 보지 못했는지, 또는 가지고 있다면 왜 여기에 대한 답변이 없는지에 대한 의견을 듣고 싶습니다. 누군가이 방법 중 하나가 실패하는 것을 본다면 그 방법도 잘 알겠지만, 최신 브라우저에서 테스트되었으며 상당히 오래되고 보편적 인 HTML / CSS 방법에 의존합니다.

예 감사합니다! 이것도 나를 영원히 미치게 만들었습니다.

내 특별한 경우에, 이것은 나를 위해 일했다 :

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

차이점 중 일부를 설명하는 reset.css를 사용하고 있지만 이것이 잘 작동하는 것 같습니다.

position: relative; IE에서 z-index 및 jQuery의 slideUp / slideDown과 같은 애니메이션 관련 문제가 있습니다.

CSS :

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery :

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

스타일링에 사용 된 글꼴 크기에 따라 조정이 필요할 수 있습니다. <label>

추신 :
내가 사용 ie7js를 IE6에서 CSS 작업을 할 수 있습니다.

단순히 사용 vertical-align: sub으로, pokrishka가 이미 제안했다.

깡깡이

HTML 코드 :

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS 코드 :

.checkboxes input {
    vertical-align: sub;
}

간단한 해결책 :

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Chrome, Firefox, IE9 +, Safari, iOS 9 이상 에서 테스트