Ini adalah salah satu masalah kecil CSS yang terus menerus mengganggu saya. Bagaimana orang-orang di sekitar Stack Overflow menyelaraskan secara vertikal checkboxesdan browserlabels secara konsisten ? Setiap kali saya menyelaraskannya dengan benar di Safari (biasanya menggunakan pada ), mereka sepenuhnya mati di Firefox dan IE. Perbaiki di Firefox, dan Safari serta IE pasti akan kacau. Saya membuang waktu untuk hal ini setiap kali saya membuat kode formulir.vertical-align: baselineinput

Berikut kode standar yang saya gunakan:

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

Saya biasanya menggunakan reset Eric Meyer, jadi elemen form relatif bersih dari penggantian. Menantikan tips atau trik yang Anda tawarkan!

Setelah lebih dari satu jam mengutak-atik, menguji, dan mencoba gaya markup yang berbeda, saya pikir saya mungkin memiliki solusi yang layak. Persyaratan untuk proyek khusus ini adalah:

1. Input harus pada jalurnya sendiri.
2. Input kotak centang perlu disejajarkan secara vertikal dengan teks label yang sama (jika tidak identik) di semua browser.
3. Jika teks label dibungkus, itu perlu indentasi (jadi tidak ada pembungkus di bawah kotak centang).

Sebelum saya masuk ke penjelasan, saya hanya akan memberi Anda kode:

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>

Berikut ini contoh kerjanya di JSFiddle .

Kode ini mengasumsikan bahwa Anda menggunakan reset seperti Eric Meyer yang tidak mengesampingkan margin input form dan padding (karenanya menempatkan margin dan reset padding di input CSS). Jelas dalam lingkungan hidup Anda mungkin akan bersarang / mengesampingkan hal-hal untuk mendukung elemen input lainnya, tetapi saya ingin menjaga hal-hal sederhana.

Hal yang perlu diperhatikan:

• Itu *overflow deklarasi inline IE hack (hack bintang-properti). Baik IE 6 dan 7 akan menyadarinya, tetapi Safari dan Firefox akan mengabaikannya. Saya pikir itu mungkin CSS yang valid, tetapi Anda masih lebih baik dengan komentar bersyarat; hanya menggunakannya untuk kesederhanaan.
• Seperti yang bisa saya katakan, satu-satunya vertical-alignpernyataan yang konsisten di seluruh browser adalah vertical-align: bottom. Pengaturan ini dan kemudian posisi relatif ke atas berperilaku hampir identik di Safari, Firefox dan IE dengan hanya satu atau dua piksel perbedaan.
• Masalah utama dalam bekerja dengan penyelarasan adalah bahwa IE menempel banyak ruang misterius di sekitar elemen input. Itu bukan padding atau margin, dan terkutuklah. Mengatur lebar dan tinggi pada kotak centang dan kemudian overflow: hiddenkarena beberapa alasan memotong ruang ekstra dan memungkinkan pemosisian IE untuk bertindak sangat mirip dengan Safari dan Firefox.
• Bergantung pada ukuran teks Anda, Anda pasti perlu menyesuaikan posisi relatif, lebar, tinggi, dan sebagainya untuk mendapatkan hal-hal yang terlihat benar.

Semoga ini bisa membantu orang lain! Saya belum mencoba teknik khusus ini pada proyek apa pun selain yang saya kerjakan pagi ini, jadi pasti pipa jika Anda menemukan sesuatu yang bekerja lebih konsisten.

Kadang-kadang vertikal-align membutuhkan dua elemen inline (span, label, input, dll ...) di samping satu sama lain agar berfungsi dengan baik. Kotak centang berikut dipusatkan dengan benar di IE, Safari, FF, dan Chrome, meskipun ukuran teks sangat kecil atau besar.

Mereka semua mengapung di sebelah satu sama lain di baris yang sama, tetapi nowrap berarti bahwa seluruh teks label selalu berada di sebelah kotak centang.

Kelemahannya adalah tag SPAN ekstra yang tidak berarti.

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

Sekarang, jika Anda memiliki teks label yang sangat panjang yang perlu dibungkus tanpa membungkus di bawah kotak centang, Anda akan menggunakan teks teks padding dan negatif pada elemen 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 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>

Bekerja dari solusi One Crayon , saya memiliki sesuatu yang bekerja untuk saya dan lebih sederhana:

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

Render pixel-for-pixel yang sama di Safari (yang dasar saya percaya) dan baik Firefox dan IE7 memeriksa baik. Ini juga berfungsi untuk berbagai ukuran font label, besar dan kecil. Sekarang, untuk memperbaiki garis dasar IE pada seleksi dan input ...

Pembaruan: (Edit Pihak Ketiga)

Posisi yang tepat bottomtergantung pada font-family dan ukuran font! Saya menemukan menggunakan bottom: .08em;untuk kotak centang & elemen radio adalah nilai umum yang baik. Saya mengujinya di Chrome / Firefox / IE11 di windows dengan font Arial & Calibri menggunakan beberapa ukuran font kecil / sedang / besar.

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

Satu hal mudah yang tampaknya berfungsi dengan baik adalah menerapkan penyesuaian posisi vertikal kotak centang dengan penyelarasan vertikal. Itu masih akan bervariasi di seluruh browser, tetapi solusinya tidak rumit.

input {
    vertical-align: -2px;
}

Referensi

mencoba vertical-align: middle

juga kode Anda sepertinya:

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

Coba solusi saya, saya mencobanya di IE 6, FF2 dan Chrome dan itu membuat piksel demi piksel di ketiga browser.

* {
  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>

Satu-satunya solusi yang berfungsi dengan baik bagi saya adalah:

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

Diuji hari ini di Chrome, Firefox, Opera, IE 7 dan 8. Contoh: Fiddle

Saya belum sepenuhnya menguji solusi saya, tetapi tampaknya berhasil dengan baik.

HTML saya sederhana:

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

Saya kemudian mengatur semua kotak centang 24pxuntuk tinggi dan lebar. Untuk membuat teks sejajar, saya membuat label line-heightjuga 24pxdan menetapkan vertical-align: top;seperti:

EDIT: Setelah pengujian IE saya menambahkan vertical-align: bottom;input dan mengubah CSS label. Anda mungkin menemukan Anda membutuhkan case css IE bersyarat untuk memilah padding - tetapi teks dan kotak inline.

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>

Jika ada yang menemukan bahwa ini tidak berhasil, mohon beri tahu saya. Ini dia beraksi (di Chrome dan IE - permintaan maaf karena tangkapan layar diambil pada retina dan menggunakan paralel untuk IE):

Saya biasanya menggunakan ketinggian garis untuk menyesuaikan posisi vertikal teks statis saya:

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>

Semoga itu bisa membantu.

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

Caranya adalah dengan menggunakan perataan vertikal hanya dalam sel tabel atau blok inline jika menggunakan tag label.

Akhirnya mari kita lihat sumber masalahnya

Kotak centang diberikan menggunakan gambar (satu dapat mengatur yang khusus melalui CSS). Berikut adalah kotak centang (tidak dicentang) di FireFox, disorot dengan inspektur DOM:

Dan inilah kotak centang tanpa gaya yang sama di Chrome:

Anda dapat melihat margin (oranye); padding tidak ada (akan ditampilkan hijau). Jadi, apa margin palsu ini di sebelah kanan dan di bawah kotak centang? Ini adalah bagian dari gambar yang digunakan untuk kotak centang . Itu sebabnya menggunakan hanya vertical-align: middletidak cukup dan itu adalah sumber masalah lintas-browser.

Jadi apa yang bisa kita lakukan tentang ini?

Salah satu opsi yang jelas adalah - ganti gambar! Untungnya, seseorang dapat melakukan ini melalui CSS dan menggantinya dengan gambar eksternal, gambar base64 (in-CSS), in-CSS svg atau hanya elemen pseudo. Ini adalah pendekatan yang kuat (lintas browser!), Dan ini adalah contoh penyesuaian yang dicuri dari pertanyaan ini :

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

Anda mungkin ingin membaca lebih banyak artikel mendalam tentang gaya seperti itu seperti beberapa yang tercantum di sini ; itu di luar jangkauan jawaban ini.

Ok, masih bagaimana dengan solusi no-custom-images-or-pseudo-elements?

TL; DR: sepertinya ini tidak akan berfungsi, gunakan kotak centang khusus sebagai gantinya

Pertama, mari kita perhatikan bahwa jika di browser lain ikon pseudo-margin di dalam kotak centang itu berubah-ubah, tidak ada solusi yang konsisten. Untuk membangunnya, kita harus menjelajahi anatomi gambar seperti itu di browser yang ada.

Jadi browser apa yang memiliki margin semu di kotak centang? Saya sudah memeriksa Chrome 75, Vivaldi 2.5 (berbasis Chromium), FireFox 54 (jangan tanya kenapa ketinggalan jaman), IE 11, Edge 42, Safari ?? (meminjam satu menit, lupa memeriksa versinya). Hanya Chrome dan Vivaldi yang memiliki margin semu seperti itu (saya menduga semua browser berbasis Chromium juga, seperti Opera).

Berapa ukuran margin semu itu? Untuk mengetahui ini, orang dapat menggunakan kotak centang yang diperbesar:

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

<input type=checkbox>

hasil saya adalah ~ 7% dari lebar / tinggi dan karenanya 0,9-1.0px dalam satuan absolut. Akurasi mungkin dipertanyakan, meskipun: coba nilai yang berbeda zoomuntuk kotak centang. Dalam pengujian saya di Chrome dan Vivaldi, ukuran relatif dari margin semu sangat berbeda pada zoomnilai 10, 20 dan pada nilai 11-19 (??):

scale tampaknya lebih konsisten:

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

<input type=checkbox>

jadi mungkin ~ 14% dan 2px adalah nilai yang benar.

Sekarang kita tahu (?) Ukuran pseudo-margin, mari kita perhatikan ini tidak cukup. Apakah ukuran ikon kotak centang sama untuk semua browser? Sayang! Inilah yang diperlihatkan oleh pemeriksa DOM untuk kotak centang yang tidak distilasi:

• FireFox: 13.3px
• Berbasis kromium: 12.8px untuk semuanya, karenanya 12.8 (100% - 14%) = 11px untuk apa yang secara visual dianggap sebagai kotak centang
• IE 11, Edge: 13px
• Safari: n / a (ini harus dibandingkan pada layar yang sama, saya percaya)

Sekarang sebelum kita membahas solusi atau trik, mari kita tanyakan: apa yang benar penyelarasan yang ? Apa yang ingin kita capai? Untuk titik tertentu itu masalah selera, tetapi pada dasarnya saya bisa memikirkan aspek "bagus" berikut:

teks dan kotak centang pada baseline yang sama (saya sengaja tidak menyesuaikan ukuran kotak centang di sini):

atau memiliki garis tengah yang sama dalam hal huruf kecil:

atau garis tengah yang sama dalam hal huruf kapital (lebih mudah untuk melihat perbedaan untuk ukuran font yang berbeda):

dan juga kita harus memutuskan apakah ukuran kotak centang harus sama dengan tinggi huruf kecil, huruf besar atau yang lain (lebih besar, lebih kecil atau antara huruf kecil dan kapital).

Untuk diskusi ini, mari panggil alignment nice jika kotak centang berada pada baseline yang sama dengan teks dan memiliki ukuran huruf kapital (pilihan yang sangat diperdebatkan):

Sekarang alat apa yang harus kita miliki:

1. sesuaikan ukuran kotak centang
2. mengenali Chromium dengan kotak centang pseudo-margined dan mengatur gaya tertentu
3. sesuaikan kotak centang / label perataan vertikal

?

1. Mengenai ukuran kotak centang penyesuaian : ada width, height, size, zoom, scale(memiliki aku melewatkan sesuatu?). zoomdan scalejangan izinkan untuk mengatur ukuran absolut, sehingga mereka hanya dapat membantu dengan menyesuaikan ke ukuran teks, tidak mengatur ukuran lintas-browser (kecuali kita dapat menulis aturan khusus browser). sizetidak bekerja dengan Chrome (apakah itu bekerja dengan IE lama? Lagi pula, itu tidak menarik). widthdan heightbekerja di Chrome dan peramban lain, sehingga kami dapat menetapkan ukuran umum, tetapi sekali lagi, di Chrome itu menetapkan ukuran seluruh gambar, bukan kotak centang itu sendiri. Catatan: minimum (lebar, tinggi) yang menentukan ukuran kotak centang (jika lebar ≠ tinggi, area di luar kotak centang ditambahkan ke "pseudo-margin").

   Sayangnya, pseudo-margin di kotak centang Chrome tidak disetel ke nol untuk lebar dan ketinggian apa pun, sejauh yang saya bisa lihat.

2. Saya khawatir tidak ada metode hanya CSS yang dapat diandalkan hari ini.

3. Mari kita pertimbangkan perataan vertikal. vertical-aligntidak dapat memberikan hasil yang konsisten ketika disetel ke middleatau baselinekarena margin semu Chrome, satu-satunya opsi nyata untuk mendapatkan "sistem koordinat" yang sama untuk semua browser adalah menyelaraskan label dan input ke top:

   

   (pada gambar: penyelarasan vertikal: atas, bawah dan bawah tanpa bayangan kotak)

Jadi apa hasil yang kita dapatkan dari ini?

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

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

Cuplikan di atas berfungsi dengan Chrome (browser berbasis Chromium), tetapi browser lain memerlukan ukuran yang lebih kecil dari kotak centang. Tampaknya tidak mungkin untuk menyesuaikan ukuran dan perataan vertikal dengan cara yang bekerja di sekitar kekhasan gambar kotak centang Chromium. Saran terakhir saya adalah: gunakan kotak centang khusus - dan Anda akan menghindari frustrasi :)

Sekarang flexbox didukung di semua browser modern, sesuatu seperti ini sepertinya pendekatan yang lebih mudah bagi saya.

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

Inilah demo versi awalan lengkap:

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>

Saya pikir ini adalah cara termudah

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

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

Saya tidak suka posisi relatif karena itu membuat elemen yang diberikan di atas segalanya pada levelnya (bisa mendapatkan di atas sesuatu jika Anda memiliki tata letak yang kompleks).

Saya telah menemukan yang vertical-align: submembuat kotak centang terlihat cukup baik selaras di Chrome, Firefox dan Opera. Tidak dapat memeriksa Safari karena saya tidak memiliki MacOS dan IE10 sedikit tidak aktif, tetapi saya merasa ini solusi yang cukup baik untuk saya.

Solusi lain mungkin untuk mencoba dan membuat CSS spesifik untuk setiap browser dan menyempurnakannya dengan beberapa penyelarasan vertikal dalam% / piksel / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Ini bekerja dengan baik untuk saya:

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>

Jawaban yang dipilih dengan 400+ upvotes tidak berfungsi untuk saya di Chrome 28 OSX, mungkin karena itu tidak diuji dalam OSX atau bahwa itu bekerja di apa pun di sekitar tahun 2008 ketika pertanyaan ini dijawab.

Waktu telah berubah, dan solusi CSS3 baru sekarang layak. Solusi saya menggunakan pseudoelements untuk membuat kotak centang khusus . Jadi ketentuannya (pro atau kontra, namun Anda melihatnya) adalah sebagai berikut:

• Hanya berfungsi di browser modern (FF3.6 +, IE9 +, Chrome, Safari)
• Bergantung pada kotak centang yang dirancang khusus, yang akan diberikan persis sama di setiap browser / OS. Di sini saya baru saja memilih beberapa warna sederhana, tetapi Anda selalu bisa menambahkan gradien linier dan semacamnya untuk membuatnya lebih keren.
• Ditujukan untuk font / ukuran font tertentu, yang jika diubah, Anda cukup mengubah posisi dan ukuran kotak centang agar tampak sejajar secara vertikal. Jika di-tweak dengan benar, hasil akhirnya harus tetap sama persis di semua browser / sistem operasi.
• Tidak ada properti pelurusan vertikal, tidak ada pelampung
• Harus menggunakan markup yang disediakan dalam contoh saya, itu tidak akan berfungsi jika terstruktur seperti pertanyaan, namun, tata letak pada dasarnya akan terlihat sama. Jika Anda ingin memindahkan berbagai hal, Anda juga harus memindahkan CSS yang terkait

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>

Solusi ini menyembunyikan kotak centang , dan menambah dan gaya pseudoelements ke label untuk membuat kotak centang yang terlihat. Karena label terkait dengan kotak centang tersembunyi, bidang input masih akan diperbarui dan nilai akan dikirimkan bersama formulir.

Dan jika Anda tertarik, inilah pendapat saya tentang tombol radio: http://jsfiddle.net/DtKrV/2/

Semoga seseorang menemukan ini berguna!

Saya tidak pernah memiliki masalah dengan melakukannya seperti ini:

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

Jika Anda menggunakan Formulir Web ASP.NET Anda tidak perlu khawatir tentang DIV dan elemen lain atau ukuran tetap. Kami dapat menyelaraskan <asp:CheckBoxList>teks dengan mengatur float:leftke tipe input CheckboxList di CSS.

Silakan periksa kode contoh berikut:

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

.Aspx kode:

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

Jika Anda menggunakan Bootstrap Twitter, Anda bisa menggunakan checkboxkelas di <label>:

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

Dengan kotak centang tipe input yang dibungkus di dalam label dan melayang ke kiri seperti:

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

ini bekerja untuk saya:

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

Pastikan ketinggian identik dengan garis-tinggi (blocklevel).

Cetak kode tinggi dan lebar kotak centang, lepas padding-nya, dan buat tingginya ditambah margin vertikal sama dengan tinggi-line label. Jika teks label inline, apungkan kotak centang. Firefox, Chrome, dan IE7 + memberikan contoh berikut secara identik: http://www.kornea.com/css-checkbox-align

Saya biasanya meninggalkan kotak centang tanpa label dan kemudian membuat "label" nya sebagai elemen yang terpisah. Ini menyebalkan, tetapi ada banyak perbedaan antar browser antara bagaimana kotak centang dan labelnya ditampilkan (seperti yang Anda perhatikan) bahwa ini adalah satu-satunya cara saya bisa mengendalikan bagaimana segala sesuatu terlihat.

Saya juga akhirnya melakukan ini dalam pengembangan winforms, untuk alasan yang sama. Saya pikir masalah mendasar dengan kontrol kotak centang adalah bahwa itu benar-benar dua kontrol yang berbeda: kotak dan label. Dengan menggunakan kotak centang, Anda menyerahkannya kepada pelaksana kontrol untuk memutuskan bagaimana kedua elemen tersebut ditampilkan di sebelah satu sama lain (dan mereka selalu salah, di mana salah = bukan apa yang Anda inginkan).

Saya sangat berharap seseorang memiliki jawaban yang lebih baik untuk pertanyaan Anda.

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>

Kode di atas akan menempatkan item daftar Anda dalam threecol dan hanya mengubah lebar sesuai.

Berikut ini memberikan konsistensi pixel-sempurna di seluruh browser, bahkan IE9:

Pendekatannya cukup masuk akal, sampai-sampai jelas:

1. Buat input dan label.
2. Tampilkan sebagai blok, sehingga Anda dapat mengapungkannya sesuka Anda.
3. Atur tinggi dan tinggi garis ke nilai yang sama untuk memastikan mereka memusat dan sejajar secara vertikal.
4. Untuk pengukuran em , untuk menghitung ketinggian elemen, browser harus mengetahui ketinggian font untuk elemen-elemen itu, dan itu sendiri tidak harus diatur dalam pengukuran em.

Ini menghasilkan aturan umum yang berlaku secara global:

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

Dengan ukuran font yang dapat disesuaikan per formulir, bidang, atau elemen.

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

Diuji di Chrome, Safari, dan Firefox terbaru di Mac, Windows, Iphone, dan Android. Dan IE9.

Metode ini kemungkinan berlaku untuk semua jenis input yang tidak lebih tinggi dari satu baris teks. Terapkan aturan jenis yang sesuai.

Jadi saya tahu ini telah dijawab berkali-kali, tetapi saya merasa saya memiliki solusi yang jauh lebih elegan daripada yang sudah disediakan. Dan bukan hanya 1 solusi elegan, tapi 2 solusi terpisah untuk menggelitik kesukaan Anda. Dengan itu, semua yang perlu Anda ketahui dan lihat terkandung dalam 2 JS Fiddle, dengan komentar.

Solusi # 1 bergantung pada "Kotak centang" asli dari browser yang diberikan, meskipun dengan twist ... Yang terkandung dalam div yang lebih mudah untuk memposisikan cross-browser, dengan overflow: disembunyikan untuk memotong kelebihan kotak centang 1px membentang (Ini agar Anda tidak bisa melihat batas FF yang jelek)

HTML sederhana: (ikuti tautan untuk meninjau css dengan komentar, blok kode adalah untuk memenuhi stackoverflow) http://jsfiddle.net/KQghJ/

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

Solusi # 2 menggunakan "Checkbox Toggle Hack" untuk beralih keadaan CSS dari DIV, yang telah diposisikan dengan benar di seluruh browser, dan setup dengan sprite sederhana untuk kotak centang tidak dicentang dan diperiksa. Semua yang diperlukan adalah menyesuaikan posisi latar belakang dengan kata Checkbox Toggle Hack. Ini, menurut saya, adalah solusi yang lebih elegan karena Anda memiliki kontrol lebih besar atas kotak centang & radio Anda, dan dapat menjamin semuanya terlihat sama di seluruh browser.

HTML sederhana: (ikuti tautan untuk mengulas CSS dengan komentar, blok kode adalah untuk memuaskan StackOverflow) http://jsfiddle.net/Sx5M2/

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

Jika ada yang tidak setuju dengan metode ini, silakan tinggalkan saya komentar, saya akan senang mendengar umpan balik tentang mengapa orang lain belum menemukan solusi ini, atau jika mereka punya, mengapa saya tidak melihat jawaban di sini mengenai mereka? Jika ada yang melihat salah satu dari metode ini gagal, akan menyenangkan untuk melihatnya juga, tetapi ini telah diuji di browser terbaru dan mengandalkan metode HTML / CSS yang cukup lama, dan universal sejauh yang saya lihat.

Yay terima kasih! Ini juga telah membuatku gila selamanya.

Dalam kasus khusus saya, ini bekerja untuk saya:

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

Saya menggunakan reset.css yang mungkin menjelaskan beberapa perbedaan, tetapi ini tampaknya bekerja dengan baik untuk saya.

position: relative; memiliki beberapa masalah di IE dengan z-index dan animasi seperti 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');
    }
});

Penataan mungkin membutuhkan penyesuaian tergantung pada ukuran font yang digunakan <label>

PS:
Saya menggunakan ie7js untuk membuat css bekerja di IE6.

Gunakan sederhana vertical-align: sub, seperti pokrishka sudah disarankan.

Biola

Kode HTML:

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

Kode CSS:

.checkboxes input {
    vertical-align: sub;
}

Solusi sederhana:

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

Diuji di Chrome, Firefox, IE9 +, Safari, iOS 9+