확인란과 레이블을 일관되게 브라우저 간 정렬하는 방법 엉망이됩니다. 양식을

이것은 끊임없이 저를 괴롭히는 사소한 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에서 테스트되었습니다. 예 : 바이올린