попробуйте vertical-align: middle

также ваш код кажется таким, как будто он должен быть:

<form>
    <div>
        <input id = "blah" type = "checkbox"><label for = "blah">Label text</label>
    </div>
</form>

Я обычно оставляю флажок без метки, а затем делаю его «метку» отдельным элементом. Это больно, но между тем, как отображаются флажки и их метки, существует такая большая разница между браузерами (как вы заметили), что это единственный способ приблизиться к контролю за тем, как все выглядит.

По той же причине я поступаю так же при разработке winforms. Я думаю, что основная проблема с флажком состоит в том, что на самом деле это два разных элемента управления: поле и метка. Используя флажок, вы оставляете на усмотрение разработчиков элемента управления, как эти два элемента отображаются рядом друг с другом (и они всегда ошибаются, где неправильно = не то, что вы хотите).

Я очень надеюсь, что у кого-то есть лучший ответ на ваш вопрос.

Предупреждение! Это слишком старый и не работает в современных браузерах.

_{I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).}

Как уже много раз отмечалось в комментариях, этот ответ больше не работает в большинстве браузеров (и, похоже, не работает с 2013 года).

После более чем часа настройки, тестирования и опробования различных стилей разметки я думаю, что у меня может быть достойное решение. Требования к этому конкретному проекту были:

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.

В этом коде предполагается, что вы используете сброс, такой как Эрик Мейер, который не отменяет поля ввода и отступы формы (следовательно, сбрасывает поля и отступы во входном CSS). Очевидно, что в реальной среде вы, вероятно, будете вкладывать / переопределять элементы для поддержки других элементов ввода, но я хотел, чтобы все было просто.

На заметку:

• Объявление *overflow - это встроенный взлом IE (взлом звездного свойства). И IE 6, и 7 заметят это, но Safari и Firefox будут игнорировать это должным образом. Я думаю, что это может быть действительный CSS, но вам все же лучше использовать условные комментарии; просто использовал это для простоты.
• Насколько я могу судить, единственным оператором vertical-align, который был согласован во всех браузерах, был vertical-align: bottom. Установка этого, а затем относительное позиционирование вверх ведет себя почти одинаково в Safari, Firefox и IE с одним или двумя несоответствиями.
• Основная проблема при работе с выравниванием заключается в том, что IE оставляет кучу загадочного пространства вокруг элементов ввода. Это не отступы или поля, и это чертовски стойко. Установка ширины и высоты флажка, а затем overflow: hidden по какой-то причине обрезает лишнее пространство и позволяет позиционированию IE действовать очень похоже на Safari и Firefox.
• В зависимости от размера текста вам, несомненно, потребуется настроить относительное расположение, ширину, высоту и т. д., Чтобы все выглядело правильно.

Надеюсь, это поможет кому-то другому! Я не пробовал эту конкретную технику ни в одном другом проекте, кроме того, над которым работал сегодня утром, поэтому обязательно обращайтесь, если найдете что-то, что работает более стабильно.

Предупреждение! В современных браузерах это слишком старый и не работает.

У меня никогда не было проблем с этим:

<form>
  <div>
    <input type = "checkbox" id = "cb" /> <label for = "cb">Label text</label>
  </div>
</form>

Обычно я использую высоту строки, чтобы отрегулировать вертикальное положение моего статического текста:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type = "checkbox" /> 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>

Иногда для вертикального выравнивания требуется два встроенных элемента (диапазон, метка, ввод и т. д.) Рядом друг с другом для правильной работы. Следующие флажки правильно центрированы по вертикали в IE, Safari, FF и Chrome, даже если размер текста очень маленький или большой.

Все они плавают рядом друг с другом в одной строке, но nowrap означает, что весь текст метки всегда остается рядом с флажком.

Обратной стороной являются лишние бессмысленные теги 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>

У меня это хорошо работает:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class = "checkboxes">
    <ul>
      <li>
        <input type = "checkbox" name = "happy" value = "yep" id = "happy" />
        <label for = "happy">Happy?</label>
      </li>
      <li>
        <input type = "checkbox" name = "hungry" value = "yep" id = "hungry" />
        <label for = "hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

Ура, спасибо! Это тоже всегда сводило меня с ума.

В моем конкретном случае это сработало для меня:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

Я использую reset.css, который может объяснить некоторые различия, но мне кажется, что он работает хорошо.

Отработка Решение One Crayon, у меня работает то, что попроще:

.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; для флажков и радиоэлементов является хорошим общим значением. Я тестировал его в Chrome / Firefox / IE11 в Windows со шрифтами Arial и Calibri, используя несколько малых / средних / больших размеров шрифта.

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

С флажком типа ввода, обернутым внутри метки и перемещенным влево следующим образом:

<label for = "id" class = "checkbox">
    <input type = "checkbox" id = "id">
    <span>The Label</span>
</label>

это сработало для меня:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Убедитесь, что высота идентична высоте строки (blocklevel).

input {
    margin: 0;
}

на самом деле трюк

Одна простая вещь, которая, кажется, работает хорошо, - это применить настройку вертикального положения флажка с помощью vertical-align. Он по-прежнему будет варьироваться в зависимости от браузера, но решение несложное.

input {
    vertical-align: -2px;
}

Справка

Это не лучший способ решения проблемы

vertical-align: middle

Добавление style = "position:relative;top:2px;" в поле ввода переместит его вниз по 2px. Поэтому в зависимости от размера шрифта вы можете перемещать его.

position: relative; имеет некоторые проблемы в IE с z-index и анимацией, такой как jQuery slideUp / slideDown.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

Стиль, вероятно, нуждается в доработке в зависимости от размера шрифта, используемого в <label>.

PS:
Я использую ie7js, чтобы CSS работал в IE6.

<fieldset class = "checks">
    <legend>checks for whatevers</legend>
    <input type = "" id = "x" />
    <label for = "x">Label</label>
    <input type = "" id = "y" />
    <label for = "y">Label</label>
    <input type = "" id = "z" />
    <label for = "z">Label</label>
</fieldset>

В любом случае вам следует обернуть элементы управления формой, сгруппированные вместе в их собственные наборы полей, здесь он играет обертку. установить ввод / метку do display: block, input float left, label float right, установить ширину, управлять интервалом с левым / правым полями, соответствующим образом выровнять текст метки.

так

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

вам, вероятно, потребуется установить границу, контур и высоту строки для обоих решений для кроссбраузерности и мультимедиа.

Если вы используете Веб-формы ASP.NET, вам не нужно беспокоиться о DIV и других элементах или фиксированных размерах. Мы можем выровнять текст <asp:CheckBoxList>, установив float:left на тип ввода CheckboxList в CSS.

Пожалуйста, проверьте следующий пример кода:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX-код:

<asp:CheckBoxList runat = "server" ID = "c1" RepeatColumns = "2" CssClass = "CheckboxList">
</asp:CheckBoxList>

<form>
    <div>
        <label style = "display: inline-block">
            <input style = "vertical-align: middle" type = "checkbox" />
            <span style = "vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

Хитрость заключается в том, чтобы использовать выравнивание по вертикали только в ячейках таблицы или в строчном блоке при использовании тега метки.

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class = "threeCol">
    <div class = "listItem">
        <input type = "checkbox" name = "name" id = "id" value = "checkbox1" />
        <label for = "name">This is your checkBox</label>
    </div>
</div>

Приведенный выше код разместит элементы вашего списка в трех цветах и ​​просто изменит ширину в соответствии с требованиями.

Я нашел один способ сделать это, который дает одинаковый результат почти во всех браузерах. По крайней мере, современные браузеры. Работает в Firefox, Chrome, Safari, Opera. В IE это будет выглядеть почти так, как если бы для входов или меток не применялись правила (т.е. у него все еще будет метка в несколько пикселей ниже вход), поэтому я думаю, что это простительно.

HTML

<label class = "boxfix"><input type = "radio">Label</label>

CSS

.boxfix {
    vertical-align: bottom;
}
.boxfix input {
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
}

Если вы используете Twitter Bootstrap, вы можете просто использовать класс checkbox на <label>:

<label class = "checkbox">
    <input type = "checkbox"> Remember me
</label>

Я не полностью протестировал свое решение, но, похоже, оно отлично работает.

Мой HTML прост:

<label class = "checkbox"><input type = "checkbox" value = "0000">0000 - 0100</label>

Затем я установил все флажки на 24px для высоты и ширины. Чтобы текст был выровнен, я делаю line-height метки также 24px и назначаю vertical-align: top; следующим образом:

Обновлено: После тестирования IE я добавил vertical-align: bottom; на вход и изменил CSS метки. Вы можете обнаружить, что вам нужен условный регистр IE css для сортировки отступов, но текст и поле встроены.

input[type = "checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class = "checkbox"><input type = "checkbox" value = "0000">0000 - 0100</label>
<label class = "checkbox"><input type = "checkbox" value = "0100">0100 - 0200</label>
<label class = "checkbox"><input type = "checkbox" value = "0200">0200 - 0300</label>
<label class = "checkbox"><input type = "checkbox" value = "0300">0300 - 0400</label>

Если кто-то обнаружит, что это не работает, пожалуйста, дайте мне знать. Вот это в действии (в Chrome и IE - извинения, скриншоты были сделаны на сетчатке и с использованием параллелей для IE):

Может, кто-то совершает ту же ошибку, что и я? Это было ... Я установил ширину для полей ввода, потому что они в основном были типа "текст", но потом забыл переопределить эту ширину для флажков - поэтому мой флажок пытался занять много лишней ширины и поэтому было сложно выровнять этикетку рядом с ним.

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}

<label for='acheckbox' class='checkboxlabel'>
    <input name = "acheckbox" id='acheckbox' type = "checkbox" class='checkbox'>Contact me</label>

Предоставляет интерактивные метки и правильное выравнивание еще в IE6 (с использованием селектора классов) и в поздних версиях Firefox, Safari и Chrome

Для согласованности с полями формы в браузерах мы используем: размер коробки: рамка-коробка

button, checkbox, input, radio, textarea, submit, reset, search, any-form-field {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Выбранный ответ с более чем 400 положительными голосами не сработал для меня в Chrome 28 OSX, вероятно, потому, что он не был протестирован в OSX или что он действительно работал во всем, что было в 2008 году, когда на этот вопрос был дан ответ.

Времена изменились, и теперь возможны новые решения CSS3. Мое решение использует псевдоэлементы для создания настраиваемый флажок. Итак, условия (плюсы или минусы, как вы на это смотрите) заключаются в следующем:

• Работает только в современных браузерах (FF3.6 +, IE9 +, Chrome, Safari)
• Используется специально разработанный флажок, который будет отображаться одинаково в каждом браузере / ОС. Здесь я только что выбрал несколько простых цветов, но вы всегда можете добавить линейные градиенты и тому подобное, чтобы сделать его более эффектным.
• Ориентирован на определенный шрифт / размер шрифта, при изменении которого вы просто измените положение и размер флажка, чтобы он выглядел выровненным по вертикали. При правильной настройке конечный результат должен быть практически одинаковым во всех браузерах / операционных системах.
• Без свойств вертикального выравнивания, без поплавков
• В моем примере необходимо использовать предоставленную разметку, она не будет работать, если будет структурирована как вопрос, однако макет по существу будет выглядеть так же. Если вы хотите что-то переместить, вам также придется переместить связанный CSS

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

<form>
    <div class = "checkbox">
        <input id = "check_me" type=checkbox />
        <label for = "check_me">Label for checkbox</label>
    </div>
</form>

Это решение скрывает флажок и добавляет псевдоэлементы и стили к метке для создания видимого флажка. Поскольку метка привязана к скрытому флажку, поле ввода все равно будет обновляться, а значение будет отправлено вместе с формой.

И если вам интересно, вот мой взгляд на переключатели: http://jsfiddle.net/DtKrV/2/

Надеюсь, кто-то сочтет это полезным!

попробуйте этот код

input[type = "checkbox"] {
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    margin-left:3px;
    border:0;
    vertical-align: middle;
    top: -1px;
    bottom: 1px;
    *overflow: hidden;
    box-sizing: border-box; /* 1 */
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    background: #fff;
}

Я думаю это самый простой способ

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type = "checkbox" /> Label text</label>
    </div>
<form>

Итак, я знаю, что на этот вопрос много раз отвечали, но я чувствую, что у меня есть более элегантное решение, чем те, которые уже были предоставлены. И не только одно элегантное решение, но и два разных решения, которые порадуют вас. С учетом сказанного, все, что вам нужно знать и видеть, содержится в двух скриптах JS с комментариями.

Решение №1 полагается на собственный «Флажок» данного браузера, хотя и с изюминкой ... Он содержится в div, который легче позиционировать в кросс-браузере, с переполнением: скрыто, чтобы убрать избыток растянутого флажка на 1 пиксель (это для того, чтобы вы не могли видеть уродливые границы FF)

Простой HTML: (перейдите по ссылке, чтобы просмотреть css с комментариями, блок кода должен удовлетворять требованиям stackoverflow)http://jsfiddle.net/KQghJ/

<label><div class = "checkbox"><input type = "checkbox" /></div> Label text</label>

Решение № 2 использует «Checkbox Toggle Hack» для переключения состояния CSS DIV, который был правильно размещен в браузере, и настройки с помощью простого спрайта для состояния снятого флажка и отмеченного флажка. Все, что нужно, это настроить положение фона с помощью указанного Checkbox Toggle Hack. Это, на мой взгляд, более элегантное решение, поскольку у вас больше контроля над вашими флажками и радио, и вы можете гарантировать, что они будут выглядеть одинаково во всех браузерах.

Простой HTML: (перейдите по ссылке, чтобы просмотреть CSS с комментариями, блок кода должен удовлетворять требованиям StackOverflow)http://jsfiddle.net/Sx5M2/

<label><input type = "checkbox" /><div class = "checkbox"></div>Label text</label>

Если кто-то не согласен с этими методами, пожалуйста, оставьте мне комментарий, я хотел бы услышать отзывы о том, почему другие не сталкивались с этими решениями, или, если они есть, почему я не вижу здесь ответов на них? Если кто-то увидит, что один из этих методов не работает, было бы неплохо увидеть это тоже, но они были протестированы в последних браузерах и полагаются на методы HTML / CSS, которые являются довольно старыми и универсальными, насколько я видел.

Жестко закодируйте высоту и ширину флажка, удалите его отступы и сделайте его высоту плюс вертикальные поля равной высоте строки метки. Если текст метки является встроенным, установите флажок. Firefox, Chrome и IE7 + идентично визуализируют следующий пример: http://www.kornea.com/css-checkbox-align

Мне не нравится относительное позиционирование, потому что оно делает элемент визуализированным выше всего остального на своем уровне (он может оказаться поверх чего-то, если у вас сложная компоновка).

Я обнаружил, что vertical-align: sub заставляет флажки выглядеть достаточно хорошо выровненными в Chrome, Firefox и Opera. Не могу проверить Safari, так как у меня нет MacOS, а IE10 немного не работает, но я считаю, что это достаточно хорошее решение для меня.

Другим решением может быть попытка создать определенный CSS для каждого браузера и настроить его с некоторым выравниванием по вертикали в% / пикселей / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Единственное идеально работающее решение для меня:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Сегодня протестировано в Chrome, Firefox, Opera, IE 7 и 8. Пример: Скрипка

Используйте просто vertical-align: sub, как уже предлагалось покришка.

Скрипка

HTML-код:

<div class = "checkboxes">
    <label for = "check1">Test</label>
    <input id = "check1" type = "checkbox"></input>
</div>

Код CSS:

.checkboxes input {
    vertical-align: sub;
}

Следующее обеспечивает идеальную согласованность между браузерами, даже IE9:

Подход вполне разумный, вплоть до очевидности:

1. Создайте вход и метку.
2. Отображайте их как блоки, чтобы вы могли перемещать их по своему усмотрению.
3. Установите одинаковое значение height и line-height, чтобы обеспечить их центрирование и выравнивание по вертикали.
4. Для измерений ЭмЭм>, чтобы вычислить высоту элементов, браузер должен знать высоту шрифта для этих элементов, и он не должен сам задаваться в измерениях em.

Это приводит к глобально применимому общему правилу:

input, label {display:block;float:left;height:1em;line-height:1em;}

Размер шрифта настраивается для каждой формы, набора полей или элемента.

#myform input, #myform label {font-size:20px;}

Протестировано в последних версиях Chrome, Safari и Firefox на Mac, Windows, Iphone и Android. И IE9.

Этот метод, вероятно, применим ко всем типам ввода, длина которых не превышает одной строки текста. Примените подходящее правило типа.

Теперь, когда flexbox поддерживается во всех современных браузерах, мне кажется, что это более простой подход.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type = "checkbox" /> Label text</label>
  </div>
</form>

Вот полная демонстрация версии с префиксом:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type = "radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type = "checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Простое решение:

<label style = "display:block">
  <input style = "vertical-align:middle" type = "checkbox">
  <span  style = "vertical-align:middle">Label</span>
</label>

Протестировано в Chrome, Firefox, IE9 +, Safari, iOS 9+

Я обнаружил, что единственный способ выстроить их в ряд - использовать абсолютную позицию для ввода. Поиграясь с верхней переменной input, я получил желаемый результат.

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}

label {
    display: inline-block;
    padding-right: 10px;
}
input[type=checkbox] {
    position: relative;
    top: 2px;
}