Vertical align checkbox / label pairs

Question

I go through the posts on this issue on Stack Overflow, but nothing really works for me. I have the following CSS code to vertically align checkbox / label pair:

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;
}

The full HTML code is here.

Checkbox / label pairs are vertically centered correctly in Safari (5.0.3) and Firefox (3.6.13) under Mac OS X. On Chrome (Mac OS X) checkboxes are rendered slightly to the top. On Windows OS checkboxes and associate labels are aligned to the bottom (consistently across different browsers: Firefox, Safari, Chrome, and Internet Explorer 8).

Could somebody please explain me why this differences between browsers / OS happens (and also how to avoid them)?

Update

The hack to vertically align checkbox with label in Chrome under Mac is as follows:

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

Now need to implement OS and browser specific conditionals...

score 14 · Answer 1 · edited Nov 19 '11 at 05:45

14

another solution:

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

note: it's simple. But not always works fine if the font-size of label is too big.

edited Nov 19 '11 at 05:45

patmortech

9,889
5
34
50

answered Apr 27 '11 at 08:57

Fmy

213
3
6

4

To make the adjustment sensitive to font-size, you could use `em` instead of `px`, e.g. `vertical-align:-0.1em`. – George Oct 09 '12 at 20:43

score 2 · Answer 2 · edited Feb 08 '13 at 09:11

2

This is how I finally did it:

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

edited Feb 08 '13 at 09:11

Anders R. Bystrup

14,996
10
58
53

answered Feb 08 '13 at 08:45

llundin

285
2
12

score 2 · Answer 3 · answered Jan 23 '11 at 22:12

2

Maybe the default margins/padding on the <input> are messing things up?

answered Jan 23 '11 at 22:12

Neil

50,855
8
54
69

score 1 · Answer 4 · answered Mar 05 '13 at 13:09

<!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>

score 0 · Answer 5 · answered Mar 01 '12 at 10:53

.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>

score -3 · Accepted Answer · answered Jan 22 '11 at 08:37

-3

No idea why the browsers do different things, they just always do. As far as this, did you try display:table-cell;?

answered Jan 22 '11 at 08:37

Elq

151
6

Try giving the checkboxes top padding which will decrease their height a little to center them. – Amit Jan 23 '11 at 00:51
12

This doesn't help anyone without specific reference to the original code and question. Adding `display: table-cell` to what?!?! – HandiworkNYC.com Jun 10 '12 at 23:22

Vertical align checkbox / label pairs

6 Answers6