HTML/CSSにおけるラジオ/チェックボックスの整列について

質問

テキストと適切にラジオボタン/チェックボックスを配置するための最もきれいな方法は何ですか？私がこれまで使用してきた唯一の信頼できる解決策は、テーブルベースです。

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

これは一部の人から顰蹙を買うかもしれません。私はちょうど（再び）テーブルレス ソリューションを調査するのに時間を費やしましたが、失敗しました。私は、フロート、絶対/相対位置決め、および同様のアプローチのさまざまな組み合わせを試しました。それらはほとんどラジオボタン/チェックボックスの推定高さに黙って依存しているだけでなく、異なるブラウザで異なる動作をしました。理想的には、サイズや特別なブラウザの癖について何も仮定しない解決策を見つけたいと思います。私はテーブルを使用することに問題はありませんが、他のソリューションがどこにあるのか疑問に思っています。

どのように解決するのですか？

私は最終的に問題を解決したと思います。一般的に推奨されている解決策は、vertical-align: middleを使用することです。

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

しかし、問題は、理論的にはうまくいくはずなのに、これでも目に見える位置のずれが生じてしまうことです。CSS2 の仕様にはこうあります。

vertical-align: middle: 親ボックスのベースラインに親のx-heightの半分を加えたボックスの垂直方向の中点を整列させます。

つまり、完全な中央にあるはずです (x-height は文字 x の高さです)。しかし、この問題は、ブラウザが一般的にラジオ ボタンやチェック ボックスに不規則な余白を追加していることが原因となっているようです。例えばFirefoxでFirebugを使って確認すると、Firefoxのデフォルトのチェックボックスのマージンは 3px 3px 0px 5px . これはどこから来ているのかわかりませんが、他のブラウザも同じようなマージンをとっているようです。したがって、完璧な配置を得るためには、これらの余白を取り除く必要があります。

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

テーブルベースのソリューションでは、余白が何らかの形で確保され、すべてがきれいに整列していることに注目するのは興味深いことです。