Düzgün metin ile radyo düğmeleri / onay kutuları hizalamak için en temiz yolu nedir? Ben kullanıyorum sadece güvenilir çözüm şimdiye kadar masa kurulu

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

Bu bazıları tarafından üzerine kaşlarını olabilir. Sadece biraz zaman (tekrar) tablosuz bir çözüm soruşturma geçirdim ama başarısız oldu. Yüzer, mutlak/göreceli konumlandırma ve benzer yaklaşımlar çeşitli kombinasyonları denedim. Onlar çoğunlukla sessizce radyo düğmeleri tahmini yüksekliği dayanıyordu sadece o / kutularını, ama onlar da farklı tarayıcılar farklı davrandım. İdeal boyutlarda veya özel tarayıcı tuhaflıklar hakkında bir şey ifade etmez, bir çözüm bulmak istiyorum. Tablolar için sorun yok, ama başka bir çözümü var, merak ediyorum.

Nihayet sorunu çözdüm sanırım. Yaygın olarak önerilen bir çözüm dikey hizalama kullanmaktır: orta:

<input type="radio" style="vertical-align: middle"> Label

Sorun, ancak, bu hala teorik olarak çalışması gerektiği halde görünür yanlış hizalamalar üretir. CSS2 şartname diyor ki:

dikey-align: orta:Üst kutu artı x-yüksekliği üst yarısı temel kutusundan dikey orta noktasını hizalayın.

Mükemmel merkezi (x-yüksekliği karakterin x yükseklik) olmalıdır. Ancak, sorun tarayıcıların sık radyo düğmeleri ve onay kutuları için bazı rasgele düzensiz kenar boşlukları Ekle gerçeğini neden gibi görünüyor. Firefox varsayılan onay kutusunu marjı 3px 3px 0px 5px kontrol edin, örneğin Firefox Firebug kullanarak bir yapabilirsiniz. Nereden geldiğini emin değilim, ama diğer tarayıcılara benzer bir kenar var gibi görünüyor. Bu yüzden mükemmel bir uyum elde etmek için, bu boşlukları kurtulmak gerekir:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Yine de ilginç bir tablo çözüm tabanlı kenar boşluklarını bir şekilde yenir ve herşey gayet güzel örtüşüyor olmasıdır.