수직 정렬이 jsfiddle에서 작동하는 이유

동일한 소스이지만 차이는 없지만 수직 정렬은 jsfiddle에서만 작동합니다. 제발 도와주세요. 이것은 크롬에서 작동하지 않습니다, HTML 자료 :수직 정렬이 jsfiddle에서 작동하는 이유

<html> 
<head> 
    <title>Demo</title> 
    <style> 
     .checkboxOfField 
     { 
      display: inline-block; 
      width: 100%; 
      background-color: red; 
      height: 40px; 
      line-height: 40px; 
     } 
    </style> 
</head> 
<body> 
    <span class="checkboxOfField"> 
     <input style="text-align: center; vertical-align: middle" type="checkbox" /> 
    </span> 
</body> 
</html>

을 그리고 이것은 jsfiddle 링크입니다 : http://jsfiddle.net/UghzT/ 그것은 크롬에서 작동합니다. 감사.

출처

2013-04-15 Leo Vo

아마도 Quirksmode 때문에?

Doctype을 추가하십시오!

출처

2013-04-15 11:12:40 dave

예, doctype없이 OS X 10.8.3의 Safari 6.0.3에서 로컬로 테스트했습니다. 수직 정렬을 무시합니다. 이를 추가하면 수직 정렬이 다시 팝업됩니다. +1 –

+1 JSFiddle이 자동으로 HTML에 html5 doctype을 추가합니다. – Bigood

세로 정렬은 아무 것도하지 않고 중간에 체크 박스를 설정하는 선 높이입니다 ... – Brainfeeder

input에 스타일을 추가하는 이유는 무엇입니까? 아무것도하지 않습니다. input에는 type="checkbox" 속성이 있습니다. 따라서 text-align:center;은 내부에 텍스트가 없으므로 약간 이상합니다. vertical-align 속성도 거기에 속하지 않습니다. 체크 박스 안쪽에 정렬 할 내용이 없습니다 ...

가운데에있는 모든 것을 정렬하기 위해 사용하는 CSS 코드입니다. this jsFiddle을 확인하십시오. 나는 '스타일'속성을 지우고 여전히 훌륭하게 작동합니다.

출처

2013-04-15 12:31:55 Brainfeeder

수직 정렬이 jsfiddle에서 작동하는 이유

답변

관련 문제