세로 정렬 확인란/레이블 쌍

스택 오버플로에서이 문제에 대한 게시물을 살펴 보았지만 실제로는 아무런 문제가 없습니다.세로 정렬 확인란/레이블 쌍

이

body { 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 11px; 
    margin: 0; 
    padding: 0; 
} 

fieldset { 
    line-height: 100%; 
} 

label { 
    display: inline-block; 
    vertical-align: baseline; 
}

전체 HTML 코드 here이다 : 나는 수직으로 정렬 체크 박스/라벨 쌍에 다음 CSS 코드가 있습니다.

Mac OS X에서 Safari (5.0.3) 및 Firefox (3.6.13)의 체크 상자/레이블 쌍이 올바르게 중앙에 위치합니다. Chrome (Mac OS X)의 확인란이 약간 위로 그려집니다. Windows OS에서 확인란 및 연결 레이블은 하단에 정렬됩니다 (Firefox, Safari, Chrome 및 Internet Explorer 8과 같이 다른 브라우저에서 일관되게 사용).

누군가 제 브라우저와 OS의 차이점이 왜 생겼는지 설명해 주시겠습니까?

업데이트

다음과 같이 수직으로 맥에서 크롬에서 레이블이 체크 박스를 정렬 할 수있는 해킹은 다음과 같습니다

input[type=checkbox] { 
    position: relative; 
    top: 1px; 
}

지금 OS 및 브라우저 특정 조건문을 구현해야 ...

출처

2011-01-22 Andrej

-3

왜 브라우저가 다른 일을하는지 전혀 모르겠다. 지금까지 이걸 시도 했니? display:table-cell;?

출처

2011-01-22 08:37:59 Elq

이 체크 박스가 높이를 중앙으로 약간 감소 패딩을 맨주고보십시오. – Amit

+11

이것은 원래 코드와 질문을 구체적으로 언급하지 않은 사람에게는 도움이되지 않습니다. 'display : table-cell'을 무엇에 추가할까요?!?! –

<input>의 기본 여백/패딩이 엉망입니다.

출처

2011-01-23 22:12:04 Neil

다른 솔루션 :

.checkbox{ 
vertical-align:-3px; 
}

참고 : 그것은 간단합니다. 그러나 레이블의 글자 크기가 너무 크면 항상 제대로 작동하지는 않습니다.

출처

2011-04-27 08:57:19 Fmy

조정을 글꼴 크기에 민감하게 만들려면'px '대신'em'을 사용할 수 있습니다. 'vertical-align : -0.1em'. – George

.flcheck-wrapper 
{ overflow:hidden; 
    margin:5px 0; 
} 

.flcheck-wrapper p 
{ font-size:12px; 
    display:inline; 
    float:left; 
    line-height:20px; 
    margin:0 0 0 10px; 
} 

.flcheck-wrapper input[type="checkbox"], 
.flcheck-wrapper input[type="radio"] 
{ display:inline; 
    float:left; 
    margin:0 !imortant; 
    line-height:20px; 
    height:20px; 
} 

<div class="flcheck-wrapper">  
    <input type="radio" name="foo" value="true" checked="checked" /> 
    <p>Some kind of text</p> 
</div> 
<div class="flcheck-wrapper">  
    <input type="radio" name="foo" value="false" /> 
    <p>Some kind of text</p> 
</div>

출처

2012-03-01 10:53:12

이 드디어 해냈어 방법입니다

label input[type=checkbox] { 
    margin-top: 5px; 
}

출처

2013-02-08 08:45:01 llundin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<link rel="shortcut icon" href="../images/favicon.ico" /> 
<style> 
.GlobalEntityComboBox { 
    font-family: Verdana; 
    font-size: 11px; 
    padding: 0px; 
    margin: 0px; 
    background-color: lightgrey; 
    border: 1px solid grey; 
    width: 190px; 
} 
.GlobalEntityComboBox li { 
    list-style-type: none; 
    line-height: 24px; 
    padding-left: 4px; 
    padding-right: 4px; 
    margin-top: 1px; 
    margin-bottom: 1px; 
} 
.GlobalEntityComboBox li.checked { 
    background-color: lightgreen; 
    border-top: 1px solid green; 
    border-bottom: 1px solid green; 
} 
.GlobalEntityComboBox input { 
    margin: 0px; 
    padding: 0px; 
    margin-right: 4px; 
    vertical-align: middle; 
} 
.GlobalEntityComboBox span { 
    vertical-align: middle; 
} 
</style> 
</head> 
<body> 
<ul class="GlobalEntityComboBox"> 
    <li class="checked"><input type="checkbox" checked/><span>All Servers</span></li> 
    <li class="checked"><input type="checkbox" checked/><span>Server 1</span></li> 
    <li class="checked"><input type="checkbox" checked/><span>Server 2</span></li> 
    <li><input type="checkbox"/><span>Server 3</span></li> 
</ul> 
</body> 
</html>

출처

2013-03-05 13:09:22 Anik

세로 정렬 확인란/레이블 쌍

답변

관련 문제