Dear all,

checkbox alignment with its label (i.e., vertical centering) across different web browsers and operating systems makes me crazy. Pasted below is standard html code which I use

<input class="middle" type="checkbox" />
<label class="middle" for="ch1">Test Item</label>

The corresponding CSS for "middle" class is:

    vertical-align: middle;

Full CSS is available here.

This code works perfectly in Firefox, Chrome, Safari, and Internet Explorer 8 under MS Windows (XP and 7). Under Mac OS X the labels are moved slightly down from the center (in Firefox, Chrome, and Safari). On Linux centering works fine in Firefox, but fails in Chrome (label is centered to the top margin of the checkbox).

Don't know why such inconsistencies between different OS happen. I'm looking for any references or pointers to solve this issue. Thanks in advance.

-- Andrej

1 answer


Have you looked into CSS resets at all? Their purpose is to make all HTML elements behave the same way by default. Changes you make on top of that should be reflected in all browsers (and hopefully all OSs as well).

Here is Meyer's well established reset:

Answered over 8 years ago by David Clarke
  • Not quite correct, the purpose of CSS resets is to remove the default styling applied to different elements by different browsers. Any additional CSS rules added after a reset will still be treated by individual browsers as those individual browsers treat them, meaning that standards-based browsers will probably apply them in a nearly identical way and IE will apply them in whatever way it thinks they should be applied. A reset will not magically remove the need for testing, or make all browsers interperet rules the same danwellman over 8 years ago
  • I apply the reset, but still doesn't work. andrej over 8 years ago