Как добиться консистентного выравнивания чекбоксов и их меток в разных браузерах?

Иногда для корректного отображения вертикального выравнивания необходимо расположить два встроенных (inline) элемента (таких как span, label, input и др.) рядом друг с другом. Приведенные ниже чекбоксы корректно выровнены по вертикали в IE, Safari, Firefox и 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><input type="checkbox"> <span>Label text x</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

Если же у вас есть очень длинный текст метки, который нужно перенести, но вы не хотите, чтобы он обрывался под чекбоксом, вы можете использовать отступы и отрицательный отступ по горизонтали на элементах label:

.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><input type="checkbox"> <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><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

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

Попробуйте использовать vertical-align: middle.

Также ваш код, скорее всего, должен выглядеть так:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Текст метки</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>

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

Для настройки вертикального положения статического текста я обычно использую свойство line-height. В вашем примере вы можете задать line-height для элемента label и input, чтобы добиться нужного выравнивания:

label {
  line-height: 18px; /* Высота строки для метки */
}
input {
  width: 13px; /* Ширина элемента input */
  height: 18px; /* Высота элемента input */
  font-size: 12px; /* Размер шрифта для текста внутри input */
  line-height: 12px; /* Высота строки для текста внутри input */
}

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

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

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

Вот ваш пример с полными префиксами, который обеспечивает поддержку в старых браузерах:

label {
  display: -webkit-box; /* Для старых веб-китов */
  display: -webkit-flex; /* Для старых веб-китов */
  display: -ms-flexbox;  /* Для IE 10 */
  display: flex;         /* Современные браузеры */
  -webkit-box-align: center; /* Для старых веб-китов */
  -webkit-align-items: center; /* Для старых веб-китов */
  -ms-flex-align: center; /* Для IE 10 */
  align-items: center;   /* Современные браузеры */
}

input[type=radio], 
input[type=checkbox] {
  -webkit-box-flex: 0;   /* Для старых веб-китов */
  -webkit-flex: none;    /* Для старых веб-китов */
  -ms-flex: none;        /* Для IE 10 */
  flex: none;            /* Современные браузеры */
  margin-right: 10px;    /* Отступ справа для лучшего вида */
}

/* Для демонстрации выравнивания (только для демонстрационных целей) */
form {
  max-width: 200px;      /* Ограничение ширины формы */
}

И вот HTML-код для демонстрации:

<form>
  <label>
    <input type="radio" checked>
    Я выровненный радио и метка
  </label>
  <label>
    <input type="checkbox" checked>
    Я выровненный чекбокс и метка
  </label>
</form>

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