最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオの作成が含まれています。しかし、フロントエンドの開発過程で、単一（複数）のチェックボックスとその背後にあるプロンプトテキストを何も設定しないと位置合わせできないことが判明し、FirefoxとIEには大きな違いがあることが判明しました。たとえvertical-align:middleが設定されていても、完全に整列するわけではありません。以下に示すように:
そこで、オンラインでいくつかの Web サイトを調べたところ、以下に示すように、この問題は一般的であることがわかりました (FF3.5)。
フォームを含む多くの Web サイト ページでは、フォーム要素とプロンプト テキストを揃えることができないという問題があります。そこで私はこの問題を研究することにしました。まず、wheatlee 先輩の記事「 vertical-align についてはみんな意見が違う」を検索してみました。ウィートリー氏は記事の中で、垂直方向のセンタリングに関する次の重要なポイントについて言及しました。
1.vertical-align:middle を使用すると、要素の中心が周囲の要素の中心に揃えられます。
2. ここでの「中心」の定義は次のとおりです。画像はもちろん高さの半分であり、テキストは小文字「x」の正確な中心であるベースラインに基づいて 0.5ex 上に移動する必要があります。ただし、多くのブラウザでは単位 ex を 0.5em として定義していることが多いため、必ずしも x の正確な中心であるとは限りません (ベースラインなどの用語がわからない場合は、最初にウィートリーの記事を読んでください)
このアイデアに従い、遭遇した問題を比較して、私が最初に考えたのは、ブラウザが「チェックボックス」と画像のレンダリングに同じルールを使用しているかどうか (チェックボックスを正方形の画像として扱うかどうか) を検証することでした。そこで、次のコードを書きました。
<スタイル>
本文{font-size:12px;}
</スタイル>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
テストテキスト
コード内の testpic.gif は、チェック ボックスとまったく同じサイズの黒い画像です。 FF3.5での表示は以下の通りです。
