Bu beni sürekli rahatsız eden küçük CSS problemlerinden biri. Yığın Taşması çevresindeki kişiler dikey olarak nasıl hizalanır checkboxesve labelssürekli olarak çapraz tarayıcıları nasıl olur? Safari'de (genellikle vertical-align: baselineaçıkken input) doğru şekilde hizaladığımda , Firefox ve IE'de tamamen kapalıdır. Firefox'ta düzeltin ve Safari ve IE kaçınılmaz olarak berbat durumda. Her formu kodladığımda bunun için zaman harcıyorum.

İşte ben çalıştığım standart kod:

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

Genelde Eric Meyer sıfırlamasını kullanıyorum, bu yüzden form öğeleri geçersiz kılmalardan nispeten temiz. Sunduğunuz ipuçlarını veya püf noktalarını dört gözle bekliyorum!

Bir saatten fazla süren tweaking, test ve farklı biçimlendirme stillerini denedikten sonra, iyi bir çözümüm olabileceğini düşünüyorum. Bu proje için gereksinimler şunlardı:

1. Girdiler kendi satırlarında olmalıdır.
2. Onay kutusu girişlerinin, tüm tarayıcılarda benzer şekilde (aynı değilse) etiket metniyle dikey olarak hizalanması gerekir.
3. Etiket metni sarılırsa, girintili olması gerekir (bu nedenle onay kutusunun altına sarılmamalıdır).

Herhangi bir açıklama yapmadan önce, size sadece kodu vereceğim:

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>

İşte JSFiddle'daki çalışma örneği .

Bu kod, Eric Meyer gibi form giriş kenar boşluklarını ve dolguyu geçersiz kılmayan bir sıfırlama kullandığınızı varsayar (bu nedenle giriş CSS'sine kenar boşluğu ve dolgu sıfırlamaları koymak). Açıkçası, canlı bir ortamda muhtemelen diğer giriş öğelerini desteklemek için bir şeyler iç içe geçireceksiniz / geçersiz kılacaksınız, ancak işleri basit tutmak istedim.

Dikkat edilmesi gerekenler:

• *overflowBeyanı bir satır içi IE kesmek (yıldız-mülk hack) 'dir. Hem IE 6 hem de 7 bunu fark edecek, ancak Safari ve Firefox bunu görmezden gelecek. Geçerli CSS olabileceğini düşünüyorum, ancak koşullu yorumlarla hala daha iyi durumdasınız; basitlik için kullandım.
• Söyleyebileceğim en iyi şey, vertical-aligntarayıcılar arasında tutarlı olan tek ifadeydi vertical-align: bottom. Bunu ayarlamak ve daha sonra nispeten yukarı doğru konumlandırmak Safari, Firefox ve IE'de sadece bir veya iki piksel tutarsızlığı ile neredeyse aynı şekilde davrandı.
• Hizalama ile çalışmanın en büyük problemi IE'nin girdi öğeleri etrafına bir sürü gizemli alan yapıştırmasıdır. Dolgu veya kenar boşluğu değildir ve kalıcıdır. Onay kutusunda bir genişlik ve yükseklik ayarlamak ve daha sonra overflow: hiddenbir nedenle fazladan alanı keser ve IE'nin konumlandırmasının Safari ve Firefox'a çok benzer şekilde hareket etmesini sağlar.
• Metin boyutunuza bağlı olarak, işlerin doğru görünmesini sağlamak için göreceli konumlandırma, genişlik, yükseklik vb.

Umarım bu başka birine yardımcı olur! Bu spesifik tekniği bu sabah üzerinde çalıştığım projeden başka bir projede denemedim, bu yüzden daha tutarlı çalışan bir şey bulursanız kesinlikle pipetleyin.

Bazen dikey hizalamanın düzgün çalışması için yan yana iki satır içi (aralık, etiket, giriş vb.) Öğeye ihtiyacı olabilir. Aşağıdaki onay kutuları, metin boyutu çok küçük veya büyük olsa bile IE, Safari, FF ve Chrome'da düzgün bir şekilde ortalanmıştır.

Hepsi aynı satırda yan yana yüzer, ancak nowrap, tüm etiket metninin her zaman onay kutusunun yanında kaldığı anlamına gelir.

Dezavantajı ekstra anlamsız SPAN etiketleri.

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

Şimdi, onay kutusunun altına sarmadan sarılması gereken çok uzun bir etiket metniniz varsa, etiket öğelerinde dolgu ve negatif metin girintisi kullanırsınız:

.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'un çözümü üzerinde çalışırken , benim için çalışan ve daha basit bir şeyim var:

.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'de (temeline güvendiğim) piksel için pikseli piksel oluşturur ve hem Firefox hem de IE7 iyi bir şekilde kontrol eder. Ayrıca büyük ve küçük çeşitli etiket yazı tipi boyutları için çalışır. Şimdi, IE'nin taban çizgisini seçimler ve girdiler üzerine sabitlemek için ...

Güncelleme: (Üçüncü Taraf Düzenleme)

Uygun bottomkonum yazı tipi ailesine ve yazı tipi boyutuna bağlıdır! bottom: .08em;Onay kutusu ve radyo elemanları için kullanmanın iyi bir genel değer olduğunu buldum . Birkaç küçük / orta / büyük yazı tipi boyutu kullanarak Arial & Calibri yazı tipleriyle Windows / Chrome / Firefox / IE11'de test ettim.

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

İyi çalışıyor gibi görünen basit bir şey, onay kutusunun dikey konumunu dikey hizalama ile ayarlamaktır. Tarayıcılar arasında hala değişecektir, ancak çözüm karmaşık değildir.

input {
    vertical-align: -2px;
}

Referans

Deneyin vertical-align: middle

Ayrıca kodunuz olması gerektiği gibi görünüyor:

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

Çözümümü deneyin, IE 6, FF2 ve Chrome'da denedim ve her üç tarayıcıda da piksel piksel işler.

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

Benim için mükemmel çalışan tek çözüm:

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

Bugün Chrome, Firefox, Opera, IE 7 ve 8'de test edildi. Örnek: Fiddle

Çözümümü tam olarak test etmedim, ancak harika çalışıyor gibi görünüyor.

HTML kodum basitçe:

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

Sonra tüm onay kutularını 24pxyükseklik ve genişlik olarak ayarladım . Metni hizalı hale getirmek için etiketin line-heightde yapmasını 24pxsağlarım vertical-align: top;:

DÜZENLEME: IE testinden sonra vertical-align: bottom;girdiye ekledim ve etiketin CSS'sini değiştirdim. Doldurmayı sıralamak için koşullu bir IE css kasasına ihtiyacınız olabilir - ancak metin ve kutu satır içi.

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>

Biri bunun işe yaramadığını fark ederse, lütfen bana bildirin. İşte eylemde (Chrome ve IE'de - retinada ekran görüntüleri çekildiği ve IE için paralellikler kullanıldığında özür dileriz):

Statik metnimin dikey konumunu ayarlamak için genellikle satır yüksekliğini kullanırım:

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>

Umarım yardımcı olur.

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

Hile, yalnızca etiket hücrelerinde dikey hizalama kullanmak için tablo hücrelerinde veya satır içi blok kullanmaktır.

Sonunda sorunun kaynağına bir göz atalım

Onay kutuları görüntüler kullanılarak oluşturulur (biri CSS ile özel olanlar ayarlanabilir). İşte, FireFox'ta DOM denetçisi ile vurgulanan (işaretlenmemiş) bir onay kutusu:

İşte Chrome'daki aynı stilsiz onay kutusu:

Kenar boşluğunu (turuncu) görebilirsiniz; dolgu mevcut değildir (yeşil renkle gösterilecektir). Onay kutusunun sağındaki ve altındaki bu sahte kenar boşluğu nedir? Bunlar, onay kutusu için kullanılan görüntünün parçalarıdır . Bu yüzden sadecevertical-align: middle gerçekten yeterli değildir ve tarayıcılar arası sorunların kaynağı budur.

Peki bu konuda ne yapabiliriz?

Açık bir seçenek - görüntüleri değiştirin! Neyse ki, bunu CSS ile yapabilir ve bunları harici görüntüler, base64 (CSS'de) görüntüler, CSS'de svg veya sadece sözde elemanlarla değiştirebilirsiniz. Bu sağlam (tarayıcılar arası!) Bir yaklaşımdır ve işte bu sorudan çalınan bu tür bir ayarlama örneği :

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

Burada listelenen bazı stiller hakkında daha ayrıntılı makaleler okumak isteyebilirsiniz. ; bu cevabın kapsamı dışında.

Tamam, hala özel görüntüler veya sahte elemanlar çözümü ne olacak?

TL; DR: Bu işe yaramaz gibi görünüyor, bunun yerine özel onay kutusunu kullanın

İlk olarak, diğer tarayıcılarda onay kutusu simgesinin içindeki sözde kenar boşluklarının keyfi olması durumunda, tutarlı bir çözüm olmadığını fark edelim. Bir tane oluşturmak için, mevcut tarayıcılarda bu tür görüntülerin anatomisini keşfetmeliyiz.

Peki, hangi tarayıcıların onay kutularındaki sahte kenar boşlukları var? Chrome 75, Vivaldi 2.5 (Krom tabanlı), FireFox 54 (neden bu kadar eski olduğunu sorma), IE 11, Edge 42, Safari'yi kontrol ettim ?? (bir dakikalığına ödünç aldı, sürümü kontrol etmeyi unuttum). Sadece Chrome ve Vivaldi'nin bu tür sahte kenar boşlukları var (Opera gibi tüm Chromium tabanlı tarayıcılardan da şüpheleniyorum).

Bu sözde marjların büyüklüğü nedir? Bunu anlamak için yakınlaştırılmış bir onay kutusu kullanılabilir:

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

<input type=checkbox>

sonucum, genişlik / yüksekliğin ~% 7'si ve dolayısıyla mutlak birimlerde 0.9-1.0 piksel. Bununla birlikte, doğruluk sorgulanabilir: zoomonay kutusu için farklı değerler deneyin . Hem Chrome hem de Vivaldi'deki testlerimde sözde marjın göreceli boyutu, zoom10, 20 değerlerinde ve 11-19 değerlerinde (??) çok farklı :

scale daha tutarlı görünüyor:

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

<input type=checkbox>

muhtemelen ~% 14 ve 2 piksel doğru değerlerdir.

Şimdi sahte kenar boşluğunun boyutunu (?) Bildiğimize göre, bunun yeterli olmadığını belirtelim. Onay kutusu simgelerinin boyutları tüm tarayıcılar için aynı mıdır? Yazık! DOM denetçisinin stilsiz onay kutuları için gösterdikleri:

• FireFox: 13.3 piksel
• Krom bazlı: 12.8px her şey için, dolayısıyla 12,8 (% 100 -% 14) = 11px görsel onay kutusu olarak algılanan ne için
• IE 11, Kenar: 13 piksel
• Safari: yok (bunlar aynı ekranda karşılaştırılmalı, inanıyorum)

Şimdi herhangi bir çözüm veya püf noktasını tartışmadan önce şunu soralım: doğru hizalama nedir? Ne başarmak için çalışıyoruz? Belirli bir noktaya gelince, bu bir zevk meselesidir, ancak temel olarak aşağıdaki "güzel" hizalamaların yönlerini düşünebilirim:

metin ve onay kutusunu aynı satır tabanındaki (Burada kasıtlı olarak onay kutusu boyutunu ayarlamıyorum):

veya küçük harflerle aynı orta satıra sahip olabilir:

veya büyük harfler açısından aynı orta satır (farklı yazı tipi boyutu için farkı görmek daha kolaydır):

ve ayrıca onay kutusunun boyutunun küçük harf, büyük harf veya başka bir şeye (daha büyük, daha küçük veya küçük ve büyük harf arasında) eşit olup olmadığına karar vermeliyiz.

Bu tartışma için, onay kutusu metnin satır taban çizgisindeyse ve büyük harf büyüklüğüne (yüksek düzeyde tartışmalı bir seçim) sahipse, hizalamayı güzel olarak adlandıralım:

Şimdi hangi araçlara ihtiyacımız var:

1. onay kutusu boyutunu ayarla
2. Sahte kenarlıklı onay kutusuyla Chromium'u tanır ve belirli stiller ayarlar
3. onay kutusunu / etiketi dikey hizalamayı ayarlama

?

1. İlgili onay kutusu boyutu ayarı : var width, height, size, zoom, scale(bir şey kaçırmış var?). zoomve scale(biz tarayıcıya özel kurallar yazabilirsiniz sürece) sadece metin boyutu, değil set çapraz tarayıcı boyutuna göre ayarlama ile yardımcı olabilir, böylece mutlak boyutunu ayarlamak için izin vermez. sizeChrome ile çalışmaz (eski IE ile çalıştı mı? Neyse, o kadar da ilginç değil). widthve heightChrome'da ve diğer tarayıcılarda çalışır, böylece ortak bir boyut ayarlayabiliriz, ancak yine Chrome'da onay kutusunun kendisini değil, tüm görüntünün boyutunu ayarlar. Not: bir onay kutusunun boyutunu tanımlayan minimumdur (genişlik, yükseklik) (genişlik yüksekliği varsa, onay kutusu karesinin dışındaki alan "sözde kenar boşluğuna" eklenir).

   Talihsiz bir şey, Chrome onay kutusundaki sözde kenar boşlukları, görebildiğim kadarıyla herhangi bir genişlik ve yükseklik için sıfıra ayarlanmamış.

2. Korkarım bu günlerde sadece güvenilir bir CSS yöntemi yok .

3. Dikey hizalamayı ele alalım. Chrome'un sahte kenar boşluğuna vertical-alignayarlandığında middleveya baselinenedeniyle tutarlı sonuçlar veremezse , tüm tarayıcılar için aynı "koordinat sistemini" almanın tek gerçek seçeneği, etiketi ve girişi şuna hizalamaktır top:

   

   (resimde: dikey hizalama: kutu gölgesiz üst, alt ve alt)

Peki bundan ne sonuç alıyoruz?

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

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

Yukarıdaki snippet, Chrome (Chromium tabanlı tarayıcılar) ile çalışır, ancak diğer tarayıcılar daha küçük bir onay kutusu boyutu gerektirir. Hem boyut hem de dikey hizalamayı Chromium'un onay kutusu görüntü tuhaflığında çalışacak şekilde ayarlamak imkansız görünüyor. Son önerim: bunun yerine özel onay kutularını kullanın - ve hayal kırıklığını önleyeceksiniz :)

Şimdi flexbox tüm modern tarayıcılarda destekleniyor, böyle bir şey bana daha kolay bir yaklaşım gibi görünüyor.

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

İşte tam ön ekli sürüm demosu:

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>

Bence bu en kolay yol

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

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

Göreceli konumlandırmayı sevmiyorum çünkü öğesinin seviyesinde her şeyin üstünde işlenen bir öğe yapar (karmaşık bir düzeniniz varsa bir şeyin üstüne çıkabilir).

vertical-align: subOnay kutularının Chrome, Firefox ve Opera'da yeterince iyi görünmesini sağladığını keşfettim . MacOS'um yok ve IE10 biraz kapalı olduğu için Safari'yi kontrol edemiyorum, ancak benim için yeterince iyi bir çözüm buldum.

Başka bir çözüm, her tarayıcı için özel CSS yapmak ve% / piksel / EM'de dikey hizalama ile ince ayar yapmak olabilir: http://css-tricks.com/snippets/css/browser-specific-hacks/

Bu benim için iyi çalışıyor:

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+ upvotes ile seçilen cevap Chrome 28 OSX'te benim için işe yaramadı, muhtemelen OSX'te test edilmediğinden veya bu soru cevaplandığında 2008'de etrafta çalıştığı için işe yaradı.

Zaman değişti ve yeni CSS3 çözümleri artık mümkün. Çözümüm , özel bir onay kutusu oluşturmak için sözde öğeler kullanır . Yani şartlar (artılar veya eksiler, ancak ona bakarsanız) aşağıdaki gibidir:

• Yalnızca modern tarayıcılarda çalışır (FF3.6 +, IE9 +, Chrome, Safari)
• Her tarayıcıda / işletim sisteminde tam olarak aynı hale getirilecek özel olarak tasarlanmış bir onay kutusuna güvenir. Burada sadece bazı basit renkler seçtim, ama her zaman daha fazla patlama sağlamak için doğrusal degradeler ve benzeri ekleyebilirsiniz.
• Değiştirilirse, dikey olarak hizalanmış görünmesi için onay kutusunun konumunu ve boyutunu değiştireceğiniz belirli bir yazı tipi / yazı tipi boyutuna yöneliktir. Doğru şekilde ayarlanmışsa, sonuç tüm tarayıcı / işletim sistemlerinde hala tam olarak aynı olmalıdır.
• Dikey hizalama özelliği yok, yüzdürme yok
• Örneğimde sağlanan işaretlemeyi kullanmalı, soru gibi yapılandırılmışsa çalışmaz, ancak düzen esasen aynı görünecektir. Bir şeyi hareket ettirmek istiyorsanız, ilişkili CSS'yi de taşımanız gerekir

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>

Bu çözüm onay kutusunu gizler ve görünür onay kutusunu oluşturmak için etikete sözde öğeler ekler ve stillere stil uygular. Etiket gizli onay kutusuna bağlı olduğundan, giriş alanı güncellenmeye devam eder ve değer formla birlikte gönderilir.

Ve eğer ilgileniyorsanız, işte radyo düğmelerimi ele alalım: http://jsfiddle.net/DtKrV/2/

Umarım birisi bunu faydalı bulur!

Hiç böyle bir sorun yaşamadım:

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

ASP.NET Web Formları kullanıyorsanız, DIV'ler ve diğer öğeler veya sabit boyutlar hakkında endişelenmenize gerek yoktur. CSS'deki CheckboxList giriş türüne <asp:CheckBoxList>ayarlayarak metni hizalayabiliriz float:left.

Lütfen aşağıdaki örnek kodu kontrol edin:

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

.ASPX kodu:

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

Twitter Bootstrap kullanıyorsanız, checkboxsınıfı aşağıdakiler üzerinde kullanabilirsiniz <label>:

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

Etiketin içine sarılı ve sola doğru kayan bir giriş tipi onay kutusu ile:

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

bu benim için çalıştı:

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

Yüksekliğinin (blok seviyesi) satır yüksekliği ile aynı olduğundan emin olun.

Onay kutusunun yüksekliğini ve genişliğini kodlayın, dolgusunu kaldırın ve yüksekliğini artı dikey kenar boşluklarını etiketin satır yüksekliğine eşit yapın. Etiket metni satır içi ise, onay kutusunu kaydırın. Firefox, Chrome ve IE7 +, şu örneği aynı şekilde oluşturur: http://www.kornea.com/css-checkbox-align

Ben genellikle bir onay kutusunu etiketsiz bırakın ve sonra onun "etiket" ayrı bir öğe yapmak. Bu bir acıdır, ancak onay kutularının ve etiketlerinin görüntülenme şekli arasında (fark ettiğiniz gibi) tarayıcılar arasında çok fazla fark vardır, bu her şeyin nasıl göründüğünü kontrol etmeye yaklaşmanın tek yoludur.

Bunu da aynı nedenden ötürü winforms geliştirmede yapıyorum. Onay kutusu kontrolü ile ilgili temel sorun gerçekten iki farklı kontrol olmasıdır: kutu ve etiket. Bir onay kutusu kullanarak, bu iki öğenin yan yana nasıl görüntüleneceğine karar vermek için kontrolün uygulayıcılarına bırakıyorsunuz (ve her zaman yanlış anlıyorlar, nerede yanlışsa, ne istediğinizi değil).

Umarım birinin sorunuza daha iyi bir cevabı vardır.

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>

Yukarıdaki kod, liste öğelerinizi üç sütun halinde yerleştirecek ve genişlikleri uygun olacak şekilde değiştirecektir.

Aşağıdaki tarayıcılarda, hatta IE9'da mükemmel piksel tutarlılığı sağlar:

Yaklaşım açık olmak için oldukça mantıklı:

1. Bir girdi ve etiket oluşturun.
2. Bunları blok olarak görüntüleyin, böylece istediğiniz gibi yüzebilirsiniz.
3. Dikey olarak ortalandıklarından ve hizalandıklarından emin olmak için yüksekliği ve çizgi yüksekliğini aynı değere ayarlayın.
4. İçin em ölçümlerinin, elemanların yüksekliği, tarayıcı bu elemanlar için yazı yüksekliğini bilmesi gerekir hesaplamak ve kendisi em ölçümlerde belirlenen olmamalıdır.

Bu, küresel olarak uygulanabilir bir genel kural ile sonuçlanır:

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

Yazı tipi boyutu form, alan kümesi veya öğe başına uyarlanabilir.

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

Mac, Windows, Iphone ve Android'de en son Chrome, Safari ve Firefox'ta test edildi. Ve IE9.

Bu yöntem, büyük olasılıkla bir metin satırından daha yüksek olmayan tüm giriş türleri için geçerlidir. Uyması için bir tür kuralı uygulayın.

Bunun birçok kez yanıtlandığını biliyorum, ancak daha önce verilmiş olanlardan daha zarif bir çözüm bulduğumu hissediyorum. Ve sadece 1 zarif çözüm değil, süslemenizi gıdıklamak için 2 ayrı çözüm. Bununla birlikte, bilmeniz ve görmeniz gereken her şey yorumlarla birlikte 2 JS Fiddle'da bulunmaktadır.

Çözüm # 1, bir bükülme ile birlikte verilen tarayıcının yerel "Onay Kutusu" na güveniyor ... Bir taşma ile çapraz tarayıcıyı konumlandırmak daha kolay olan bir div içinde yer alıyor: 1 piksel uzatılmış onay kutusunun fazlalığını kesmek için gizli (bu yüzden FF'nin çirkin sınırlarını göremezsiniz)

Basit HTML: (css yorumlarla incelemek için bağlantıyı takip edin, kod bloğu yığın akışını tatmin etmektir) http://jsfiddle.net/KQghJ/

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

Çözüm # 2, tarayıcı arasında düzgün bir şekilde konumlandırılmış bir DIV'nin CSS durumunu değiştirmek için "Onay Kutusu Açma / Kapama Düğmesini" kullanır ve onay kutusu işaretlenmemiş ve kontrol edilmiş durumlar için basit bir hareketli grafikle kurulum yapar. Gereken tek şey, söz konusu Checkbox Toggle Hack ile arka plan konumunu ayarlamaktır. Bu, bence, onay kutularınız ve radyolarınız üzerinde daha fazla kontrole sahip olduğunuzdan ve tarayıcılarda aynı görünmelerini garanti edebildiğinizden daha zarif bir çözümdür.

Basit HTML: (CSS'yi yorumlarla incelemek için bağlantıyı takip edin, kod bloğu StackOverflow'u tatmin etmek içindir) http://jsfiddle.net/Sx5M2/

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

Birisi bu yöntemlere katılmıyorsa, lütfen bana bir yorum bırakın, başkalarının neden bu çözümlerle karşılaşmadığına dair bir geri bildirim duymak isterim veya eğer varsa, neden bunlarla ilgili hiçbir cevap görmüyorum? Herkes bu yöntemlerden birinin başarısız olduğunu görürse, bunu görmek güzel olurdu, ancak bunlar en son tarayıcılarda test edildi ve gördüğüm kadarıyla oldukça eski ve evrensel olan HTML / CSS yöntemlerine güveniyor.

Teşekkürler! Bu da beni sonsuza dek çıldırtıyor.

Benim özel durumumda, bu benim için çalıştı:

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

Bazı farklılıkları açıklayabilecek reset.css kullanıyorum, ancak bu benim için iyi çalışıyor gibi görünüyor.

position: relative; IE'de z-endeksi ve jQuery'nin slideUp / slideDown gibi animasyonlarıyla ilgili bazı sorunlar var.

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

Stilin, kullanılan font boyutuna bağlı olarak muhtemelen ince ayarlara ihtiyacı var <label>

PS: IE7 içinde css çalışması
için ie7js kullanın.

Basitçe vertical-align: sub, pokrishka zaten önerildiği gibi kullanın .

Vaktini boşa harcamak

HTML Kodu:

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

CSS Kodu:

.checkboxes input {
    vertical-align: sub;
}

Basit çözüm:

<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+'da test edildi