Це одна з незначних проблем CSS, яка постійно мене мучить. Як люди навколо Stack Overflow вертикально вирівнюються checkboxesта їх labelsпослідовно перехрещується ? Кожен раз, коли я їх правильно вирівнювати в Safari (зазвичай це використовується vertical-align: baselineв режимі input), вони повністю вимкнені в Firefox та IE. Виправте це у Firefox, і Safari та IE неминуче зіпсуються. Я витрачаю час на це кожен раз, коли кодую форму.

Ось стандартний код, з яким я працюю:

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

Зазвичай я використовую скидання Еріка Мейєра, тому елементи форми відносно чисті від перекриття. З нетерпінням чекаємо будь-яких порад чи рекомендацій, які ви можете запропонувати!

Після години налаштування, тестування та спробу різних стилів розмітки, я думаю, що у мене може бути гідне рішення. Вимоги до цього конкретного проекту були:

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.
• Залежно від розміру тексту, вам, без сумніву, потрібно буде відрегулювати відносне розташування, ширину, висоту тощо, щоб все було правильно.

Сподіваюся, це допоможе комусь іншому! Я не пробував цю специфічну техніку в будь-яких проектах, окрім того, над яким я працював сьогодні вранці, тому, безумовно, виправдайте, якщо ви знайдете щось, що працює більш послідовно.

Іноді для вертикальної вирівнювання потрібні два вбудовані (проміжок, етикетка, введення тощо) елементи поруч, щоб нормально працювати. Наступні прапорці належним чином розташовані вертикально по центру IE, Safari, FF та Chrome, навіть якщо розмір тексту дуже малий чи великий.

Усі вони плавають поруч один з одним на одному рядку, але норап означає, що весь текст мітки завжди залишається поруч із прапором.

Мінусом є додаткові безглузді теги 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>

Опрацьовуючи рішення 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>

Одна зручна річ, яка, здається, працює добре, це застосувати регулювання вертикального положення прапорця з вертикальним вирівнюванням. Він все одно буде відрізнятися в різних браузерах, але рішення не є простим.

input {
    vertical-align: -2px;
}

Довідково

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

також ваш код здається таким, яким він повинен бути:

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

Єдине ідеально працююче рішення для мене:

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

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

Я не повністю перевірив своє рішення, але, здається, він працює чудово.

Мій HTML просто:

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

Потім я встановлюю всі прапорці 24pxдля висоти та ширини. Для того, щоб текст вирівняний я зробити ярлик це line-heightтакож 24pxі правонаступником vertical-align: top;таким чином:

EDIT: Після тестування IE я додав vertical-align: bottom;до вводу та змінив CSS мітки. Вам може здатися, що вам потрібен умовний регістр css IE для впорядкування прокладки - але текст і поле є рядковими.

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):

Зазвичай я використовую висоту рядка для регулювання вертикального положення мого статичного тексту:

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>

Сподіваюся, що це допомагає.

<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). Ось (не поставлений галочку) прапорець у FireFox, виділений інспектором DOM:

А ось такий же нестиркий прапорець у Chrome:

Ви можете бачити маржу (помаранчевий); прокладки немає (було б показано зеленим). Отже, що це за псевдополя праворуч і внизу прапорця? Це частини зображення, які використовуються для прапорця . Ось чому використання просто vertical-align: middleнасправді недостатньо, і це джерело проблем із перехресним браузером.

То що ми можемо з цим зробити?

Один очевидний варіант - замінити зображення! На щастя, це можна зробити за допомогою CSS та замінити зображення зовнішніми зображеннями, зображеннями base64 (в CSS), in-CSS svg або просто псевдоелементами. Це надійний (крос-браузер!) Підхід, і ось приклад такого коригування, викраденого з цього питання :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Ви можете прочитати ще кілька поглиблених статей про такі стилі, як деякі, перелічені тут ; це не відповідає цій відповіді.

Гаразд, що робити з рішенням не-користувальницьких зображень чи псевдоелементів?

TL; DR: схоже, що це не працюватиме, замість цього використовуйте спеціальний прапорець

По-перше, зауважимо, що якщо в інших браузерах ці псевдополі всередині значка прапорця були довільними, не було б послідовного рішення. Щоб побудувати його, ми повинні вивчити анатомію таких зображень у існуючих браузерах.

Отже, які браузери мають псевдополі у прапорцях? Я перевірив Chrome 75, Vivaldi 2.5 (на основі хрому), FireFox 54 (не питайте, чому такі застарілі), IE 11, Edge 42, Safari ?? (позичив одну на хвилину, забув перевірити версію). Тільки Chrome і Vivaldi мають такі псевдополі (я підозрюю, що і всі браузери на базі Chromium, як, наприклад, Opera).

Який розмір цих псевдомаргій? Щоб розібратися в цьому, можна скористатися збільшеним прапором:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

мій результат ~ 7% ширини / висоти і, отже, 0,9-1,0 пікселів в абсолютних одиницях. Хоча може бути поставлена ​​під сумнів точність: спробуйте різні значення zoomдля прапорця. У моїх тестах як у Chrome, так і у Вівальді відносний розмір псевдо-поля дуже відрізняється при zoomзначеннях 10, 20 та значеннях 11-19 (??):

scale здається, більш послідовним:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

тому, ймовірно, ~ 14% і 2px - правильні значення.

Тепер, коли ми знаємо (?) Розмір псевдо-поля, зазначимо, що цього недостатньо. Чи розміри значків прапорців однакові для всіх браузерів? На жаль! Ось що показує інспектор DOM для нестиглих прапорців:

• FireFox: 13,3 пікселів
• На основі хрому: 12,8 пікселів для всього, отже, 12,8 (100% - 14%) = 11 пікселів для того, що візуально сприймається як прапорець
• IE 11, Край: 13 пікселів
• Safari: n / a (я вважаю, це слід порівнювати на одному екрані)

Тепер, перш ніж ми обговоримо будь-які рішення чи хитрощі, давайте запитаємо: що таке правильне вирівнювання? Чого ми намагаємось досягти? До певного моменту це питання смаку, але в основному я можу придумати такі "приємні" аспекти вирівнювання:

текст і прапорець на тій же базовій лінії (я навмисно не змінюю розмір прапорця тут):

або мати однаковий середній рядок у вигляді малих літер:

або однакова середня лінія з великої літери (простіше помітити різницю для різного розміру шрифту):

а також ми маємо вирішити, чи розмір прапорця повинен бути рівний висоті малої літери, великої літери чи чогось іншого (більшого, меншого розміру або між малим і великим літером).

Для цього обговорення давайте назвемо вирівнювання приємним, якщо прапорець розташований на тій же базовій лінії, що і текст, і має розмір великої літери (дуже спірний вибір):

Тепер які інструменти ми маємо:

1. відрегулювати розмір прапорця
2. розпізнати Chromium за допомогою його псевдопоміжної прапорці та встановити конкретні стилі
3. налаштувати вертикальне вирівнювання прапорця / мітки

?

1. Що стосується коригування розміру прапорця : є width, height, size, zoom, scale(у мене що - то пропустил?). zoomі scaleне дозволяють встановлювати абсолютний розмір, тому вони можуть допомогти лише з налагодженням розміру тексту, а також не встановити розмір крос-браузера (якщо ми не можемо написати правила, що стосуються браузера). sizeне працює з Chrome (це працювало зі старим IE? все одно, це не так цікаво). widthі heightпрацюємо в Chrome та інших веб-переглядачах, тому ми можемо встановити загальний розмір, але знову ж таки, в Chrome він встановлює розмір усього зображення, а не сам прапорець. Примітка: мінімум (ширина, висота) визначає розмір прапорця (якщо ширина ≠ висота, площа поза квадратів прапорців додається до "псевдополя").

   Прикро, що псевдополі у прапорці Chrome не встановлені на нуль для будь-якої ширини та висоти, наскільки я бачу.

2. Боюся, що сьогодні немає надійного методу, що стосується лише CSS .

3. Розглянемо вертикальне вирівнювання. vertical-alignне може дати послідовних результатів при встановленні middleабо baselineз-за псевдоположення Chrome, єдиний реальний варіант отримати ту саму "систему координат" для всіх браузерів - це вирівнювання мітки та введення даних до top:

   

   (на малюнку: вертикальне вирівнювання: верх, низ і низ без тіні)

То який результат ми отримуємо від цього?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

Вищенаведений фрагмент працює з Chrome (браузери на основі хрому), але для інших браузерів потрібний менший розмір прапорця. Здається, неможливо відрегулювати як розмір, так і вертикальне вирівнювання таким чином, що працює навколо химерності зображення прапорця Chromium. Моя остаточна пропозиція: замість цього використовуйте власні прапорці - і ви уникнете розчарувань :)

Тепер, коли 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>

Я думаю, що це найпростіший спосіб

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

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

Мені не подобається відносне позиціонування, оскільки воно робить елемент, виведений вище всього іншого на своєму рівні (він може перевершити щось, якщо у вас складний макет).

Я виявив, що vertical-align: subробить прапорці досить добре вирівняними в Chrome, Firefox та Opera. Не можу перевірити Safari, оскільки у мене немає MacOS, а IE10 трохи вимкнений, але я знайшов це для мене досить хорошим рішенням.

Іншим рішенням може бути спробувати створити специфічний CSS для кожного браузера та налагодити його за допомогою вертикального вирівнювання у% / пікселів / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

Це добре для мене:

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>

Обрана відповідь із 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/

Сподіваюся, хтось вважає це корисним!

У мене ніколи не було проблем робити це так:

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

Якщо ви використовуєте веб-форми 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>

Якщо ви використовуєте Twitter Bootstrap, ви можете просто використовувати checkboxклас на <label>:

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

Якщо прапорець типу введення загорнутий всередині етикетки і плаває ліворуч так:

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

Переконайтесь, що висота тотожної висоти лінії (блок-рівень).

Встановіть прапорець висоти та ширини прапорця, вийміть її підкладку та зробіть її висоту плюс вертикальні поля, рівну висоті лінії мітки. Якщо текст мітки є вбудованим, поставте прапорець. Firefox, Chrome та IE7 + надають такий приклад однаково: http://www.kornea.com/css-checkbox-align

Зазвичай я залишаю прапорець без маркування, а потім роблю його "мітку" окремим елементом. Це біль, але існує стільки різниць між браузерами між тим, як відображаються прапорці та їх мітки (як ви помітили), що це єдиний спосіб, коли я можу наблизитися до контролю, як все виглядає.

Я також закінчую це в розробці winforms з тієї ж причини. Я думаю, що основна проблема керування прапором полягає в тому, що це дійсно два різні елементи керування: поле та ярлик. Використовуючи прапорець, ви залишаєте його виконавцям керування, щоб вирішити, як ці два елементи відображаються поруч (і вони завжди неправильно, де неправильно = не те, що вам потрібно).

Я дуже сподіваюся, що хтось краще відповість на ваше запитання.

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>

Вищевказаний код розмістить ваші елементи списку в трьохкольорах і просто змінить ширину на відповідну.

Нижче наведено ідеальну піксельну консистенцію для веб-переглядачів, навіть IE9:

Підхід є досить розумним, до того, очевидним є:

1. Створіть введення та мітку.
2. Відображайте їх як блок, щоб ви могли плавати ними як завгодно.
3. Встановіть висоту та висоту лінії на однакове значення, щоб переконатися, що вони розташовуються по центру та вертикалі.
4. Для вимірювань em , щоб обчислити висоту елементів, браузер повинен знати висоту шрифту для цих елементів, і він сам не повинен встановлюватися в 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.

Цей метод, ймовірно, застосовно до всіх типів вводу, які не перевищують одного рядка тексту. Застосуйте правило типу для відповідності.

Тож я знаю, що на це відповіли багато разів, але я вважаю, що у мене є спосіб, який є більш елегантним, ніж ті, які вже були надані. І не тільки 1 елегантне рішення, але і 2 окремі рішення, які тицять свої фантазії. З урахуванням сказаного, все, що потрібно знати і переглядати, міститься в 2-х JS Fiddle's, з коментарями.

Рішення №1 покладається на вбудований "прапорець" даного браузера, хоча і з поворотом ... Його міститься в діві, який простіше розташувати між веб-браузером, із переповненням: приховано для подрібнення надлишків розтягнутого на 1 px прапорця (це так, що ви не можете бачити потворні межі 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, які є досить старими та універсальними, наскільки я бачив.

Так, дякую! Це теж назавжди мене заганяло.

У моєму конкретному випадку це спрацювало для мене:

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, що могло б пояснити деякі відмінності, але це, здається, працює добре для мене.

position: relative; має деякі проблеми в IE із z-індексом та анімаціями, такими як slideUp / slideDown jQuery.

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.

Використовуйте просто 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;
}

Просте рішення:

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