これは、CSSのマイナーな問題の1つであり、常に悩まされています。Stack Overflowの周りの人々はどのようにして垂直方向に整列checkboxesし、labels一貫してクロスブラウザですか？私はサファリ（通常使用して、それらを正しく合わせるたびvertical-align: baselineにinput）、彼らは完全にオフにFirefoxとIEでいます。Firefoxで修正すると、SafariとIEは必ず混乱します。フォームをコーディングするたびに、これに時間を浪費しています。

これが私が使用する標準コードです：

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

私は通常、Eric Meyerのリセットを使用するため、フォーム要素のオーバーライドは比較的クリーンです。あなたが提供しなければならないヒントやトリックを楽しみにしています！

1時間以上、さまざまなスタイルのマークアップを調整、テスト、試行した結果、適切な解決策があると思います。この特定のプロジェクトの要件は次のとおりです。

1. 入力は独自の行になければなりません。
2. チェックボックスの入力は、すべてのブラウザーでラベルテキストと垂直に整列する必要があります（同一でない場合でも）。
3. ラベルテキストが折り返される場合は、インデントする必要があります（したがって、チェックボックスの下で折り返されません）。

説明に入る前に、コードを説明します。

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>

JSFiddleの実際の例を次に示します。

このコードは、フォームの入力マージンとパディングをオーバーライドしない（したがって、入力CSSにマージンとパディングリセットを設定する）Eric Meyerのようなリセットを使用していることを前提としています。明らかに、ライブ環境では、他の入力要素をサポートするために、入れ子にしたり上書きしたりすることになるでしょうが、私は物事を単純にしたいと思っていました。

注意事項：

• *overflow宣言は、インラインIEハック（スタープロパティハック）です。IE 6と7の両方がそれを認識しますが、SafariとFirefoxはそれを適切に無視します。私はそれが有効なCSSかもしれないと思いますが、条件付きのコメントの方が良いでしょう。単純にするために使用しました。
• 私が知ることができるように、vertical-alignブラウザ間で一貫した唯一のステートメントはでしたvertical-align: bottom。これを設定してから上に相対的に配置すると、Safari、Firefox、IEでほぼ同じように動作し、1ピクセルまたは2ピクセルだけの差異が生じます。
• 配置を操作する際の主な問題は、IEが入力要素の周りに不思議なスペースをたくさん張り付けることです。それはパディングやマージンではありません、そしてそれは永続的にのろわれました。チェックボックスに幅と高さを設定すると、overflow: hidden何らかの理由で余分なスペースが切り取られ、IEの配置がSafariやFirefoxと非常によく似た動作をするようになります。
• テキストのサイズによっては、正しい位置に表示するために、相対的な位置、幅、高さなどを調整する必要があることは間違いありません。

これが他の誰かを助けることを願っています！私は今朝取り組んでいるプロジェクト以外のプロジェクトでこの特定のテクニックを試したことがないので、より一貫して機能するものを見つけたら間違いなくパイプを張ってください。

場合によっては、vertical-alignが正しく機能するために、2つのインライン（スパン、ラベル、入力など）要素を並べて配置する必要があります。次のチェックボックスは、テキストサイズが非常に小さいか大きい場合でも、IE、Safari、FF、およびChromeで垂直方向の中央に正しく配置されます。

それらはすべて同じ行で互いに隣り合って浮動しますが、nowrapは、ラベルテキスト全体が常にチェックボックスの隣に留まることを意味します。

欠点は、余分な無意味なSPANタグです。

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

ここで、チェックボックスの下で折り返すことなく折り返す必要がある非常に長いラベルテキストがある場合、ラベル要素にパディングと負のテキストインデントを使用します。

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

オフ作業を一つのクレヨンのソリューション、私は私のために動作し、単純である何かを持っています：

.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（私が信頼するベースライン）でピクセルごとに同じようにレンダリングし、FirefoxとIE7の両方を適切にチェックアウトします。また、大小さまざまなラベルフォントサイズで機能します。さて、選択と入力に関するIEのベースラインを修正するために...

アップデート：（サードパーティ編集）

適切なbottom位置はfont-familyとfont-sizeに依存します！bottom: .08em;チェックボックスとラジオ要素に使用することは、一般的な値として適切であることがわかりました。私はいくつかの小/中/大のフォントサイズを使用して、ArialとCalibriフォントのウィンドウのChrome / Firefox / IE11でテストしました。

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

うまくいくと思われる簡単なことの1つは、垂直方向の位置合わせでチェックボックスの垂直位置を調整することです。それでもブラウザーによって異なりますが、解決策は複雑ではありません。

input {
    vertical-align: -2px;
}

参照

試す vertical-align: middle

また、あなたのコードは次のようになるはずです：

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

私の解決策を試してください、IE 6、FF2、Chromeで試してみました。3つのブラウザーすべてでピクセルごとにレンダリングされます。

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

私にとって完璧に機能する唯一の解決策は：

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

Chrome、Firefox、Opera、IE 7および8で本日テスト済み。例：フィドル

私は自分のソリューションを完全にテストしていませんが、うまく機能しているようです。

私のHTMLは単純です：

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

次に、すべてのチェックボックスを24px高さと幅の両方に設定します。テキストを揃えるには、ラベルline-heightも作成24pxして、次のvertical-align: top;ように割り当てます。

編集： IEのテスト後vertical-align: bottom;、入力に追加してラベルのCSSを変更しました。パディングを整理するために条件付きのIE cssケースが必要な場合がありますが、テキストとボックスはインラインです。

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>

これでうまくいかない場合は、お知らせください。これは実際の動作です（ChromeとIEで-スクリーンショットが網膜で撮影され、IEにParallelsを使用したため謝罪）：

私は通常、静的テキストの垂直位置を調整するために行の高さを使用します。

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>

お役に立てば幸いです。

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

トリックは、ラベルタグを使用する場合は、テーブルセルまたはインラインブロックでのみ垂直方向の配置を使用することです。

最後に問題の原因を見てみましょう

チェックボックスは画像を使用してレンダリングされます（CSSを介してカスタムのものを設定できます）。FireFoxの（チェックされていない）チェックボックスは、DOMインスペクターで強調表示されています。

そして、これがChromeの同じスタイルのないチェックボックスです：

マージン（オレンジ）が表示されます。パディングはありません（緑色で表示されます）。それで、チェックボックスの右側と下部にあるこの疑似マージンは何ですか？これらは、チェックボックスに使用される画像の一部です。そのため、単に使用するだけでvertical-align: middleは不十分であり、それがブラウザ間の問題の原因です。

では、これについて何ができるでしょうか？

明白なオプションの1つは、画像を置き換えることです。さいわい、CSSを使用してこれを実行し、外部画像、base64（CSS内）画像、CSS内svg、または単なる疑似要素に置き換えることができます。これは堅牢な（ブラウザ間！）アプローチであり、この質問から盗まれたそのような調整の例を次に示します。

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

ここにリストされているようなスタイリングについて、さらに詳しい記事を読むことをお勧めします。この回答の範囲外です。

それでは、カスタム画像や疑似要素のないソリューションについてはどうでしょうか？

TL; DR：これは機能しないようです。代わりにカスタムチェックボックスを使用してください

最初に、他のブラウザでチェックボックスアイコン内の疑似マージンが任意である場合、一貫した解決策がないことに注意してください。1つを構築するには、既存のブラウザーでそのような画像の構造を調査する必要があります。

では、どのブラウザがチェックボックスに疑似マージンを持っているのでしょうか？私はChrome 75、Vivaldi 2.5（Chromiumベース）、FireFox 54（なぜそのような時代遅れなのかは質問しないでください）、IE 11、Edge 42、Safariをチェックアウトしましたか？（1分借りて、バージョンをチェックアウトするのを忘れました）。ChromeとVivaldiだけがそのような疑似マージンを持っています（OperaのようなすべてのChromiumベースのブラウザーも疑っています）。

それらの疑似マージンのサイズはどれくらいですか？これを理解するには、ズームされたチェックボックスを使用できます。

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

<input type=checkbox>

私の結果は、幅/高さの〜7％であり、絶対単位で0.9-1.0pxです。ただし、精度に問題がある可能性がzoomあります。チェックボックスの値を変えてみてください。ChromeとVivaldiの両方での私のテストでは、疑似マージンの相対サイズはzoom値10、20と値11-19（??）で大きく異なります。

scale より一貫性があるようです：

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

<input type=checkbox>

したがって、おそらく〜14％と2pxが正しい値です。

疑似マージンのサイズがわかった（？）ので、これでは十分ではないことに注意してください。チェックボックスアイコンのサイズはすべてのブラウザで同じですか？ああ！以下は、スタイルのないチェックボックスに対してDOMインスペクターが表示するものです。

• FireFox：13.3px
• クロム系：12.8px全部ため、従って12.8（100％ - 14％）= 11px視覚的にチェックボックスとして知覚されるもののために
• IE 11、エッジ：13px
• Safari：なし（これらは同じ画面で比較する必要があると思います）

解決策やトリックを説明する前に、質問しましょう。正しい配置とは何ですか？私たちは何を達成しようとしていますか？ある意味では、それは好みの問題ですが、基本的には、次の「素晴らしい」アラインメントの側面を考えることができます。

同じベースライン上のテキストとチェックボックス（ここでは意図的にチェックボックスのサイズを調整しません）：

または小文字で同じ中央の行を持っている：

または同じ大文字の大文字の真ん中の行（異なるフォントサイズの違いを確認する方が簡単です）：

また、チェックボックスのサイズを小文字、大文字、またはその他の高さ（大きい、小さい、小文字と大文字の間）と同じにするかどうかを決定する必要があります。

このディスカッションでは、チェックボックスがテキストと同じベースライン上にあり、大文字のサイズ（非常に議論の余地のある選択肢）である場合、配置を適切に呼び出します。

次に、どのツールを使用する必要がありますか。

1. チェックボックスのサイズを調整する
2. 疑似マージンチェックボックスでChromiumを認識し、特定のスタイルを設定する
3. チェックボックス/ラベルの垂直方向の配置を調整する

？

1. チェックボックスのサイズ調整：ありますwidth、height、size、zoom、scale（私が何かを見逃しています？）。zoomまたscale、絶対サイズを設定することはできません。そのため、ブラウザーサイズを設定するのではなく、テキストサイズの調整にのみ役立つ場合があります（ブラウザー固有のルールを記述できない場合）。sizeChromeでは動作しません（古いIEでは動作しましたか？とにかく、それほど興味深いものではありません）。widthそしてheightChromeと他のブラウザでの作業は、私たちは、共通のサイズを設定することができますが、再び、Chromeでそれが画像全体のサイズではなく、チェックボックス自体を設定します。注：これはチェックボックスのサイズを定義する最小値（幅、高さ）です（幅≠高さの場合、チェックボックスの正方形の外側の領域が「疑似マージン」に追加されます）。

   残念なことに、Chromeの疑似マージンチェックボックスは、私が見る限り、どの幅と高さでもゼロに設定されていません。

2. 最近、信頼できるCSSのみの方法はありません。

3. 垂直方向の配置を考えてみましょう。vertical-alignに設定したmiddle場合baseline、またはChromeの疑似マージンのために一貫した結果を得ることができません。すべてのブラウザで同じ「座標系」を取得する唯一の実際のオプションは、ラベルとを入力することtopです。

   

   （画像上：垂直方向の位置合わせ：ボックスシャドウなしの上部、下部、下部）

これからどのような結果が得られますか？

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

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

上記のスニペットはChrome（Chromiumベースのブラウザー）で動作しますが、他のブラウザーではチェックボックスのサイズを小さくする必要があります。Chromiumのチェックボックス画像の癖を回避する方法でサイズと垂直方向の配置の両方を調整することは不可能のようです。私の最後の提案は次のとおりです。代わりにカスタムチェックボックスを使用してください。そうすればフラストレーションを回避できます:)

flexboxがすべての最新のブラウザーでサポートされるようになったので、このようなものは私にとってより簡単なアプローチのように見えます。

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

これが完全なプレフィックス付きバージョンのデモです。

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>

これが一番簡単な方法だと思います

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

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

相対的な配置は、要素をそのレベルで他の何よりも上にレンダリングするため、私は好きではありません（複雑なレイアウトがある場合、それは何かの上に乗ることができます）。

vertical-align: subチェックボックスがChrome、Firefox、Operaで十分に整列して見えることがわかりました。MacOSがなく、IE10がわずかにオフになっているため、Safariをチェックできませんが、私にとっては十分な解決策であることがわかりました。

別の解決策は、すべてのブラウザーに特定のCSSを試してみて、％/ pixels / EMsのいくつかの垂直配置で微調整することです：http : //css-tricks.com/snippets/css/browser-specific-hacks/

これは私にとってうまくいきます：

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以上の賛成票で選ばれた回答は、Chrome 28 OSXでは機能しませんでした。おそらく、OSXでテストされていないか、この質問が回答された2008年頃に機能したためです。

時代は変わり、新しいCSS3ソリューションが実現可能になりました。私のソリューションでは、疑似要素を使用してカスタムチェックボックスを作成しています。したがって、規定（賛否両論ですが、それを見ると）は次のようになります。

• 最新のブラウザー（FF3.6 +、IE9 +、Chrome、Safari）でのみ機能します
• すべてのブラウザ/ OSでまったく同じようにレンダリングされるカスタム設計のチェックボックスに依存します。ここでは、単純な色をいくつか選択しましたが、線形グラデーションなどを追加して、より強烈な印象にすることができます。
• 特定のフォント/フォントサイズに合わせて調整されており、変更された場合は、チェックボックスの位置とサイズを変更して、垂直に整列して表示されるようにします。正しく調整すれば、最終結果はすべてのブラウザー/オペレーティングシステムでまったく同じに近くなります。
• 垂直方向の配置プロパティ、フロートなし
• 私の例では提供されたマークアップを使用する必要があります。質問のように構造化されている場合は機能しませんが、レイアウトは基本的に同じに見えます。物事を移動したい場合は、関連するCSSも移動する必要があります。

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>

このソリューションでは、チェックボックスを非表示にし、ラベルに疑似要素を追加してスタイルを設定して、表示されるチェックボックスを作成します。ラベルは非表示のチェックボックスに関連付けられているため、入力フィールドは引き続き更新され、値はフォームと共に送信されます。

そして、もし興味があれば、ラジオボタンの私の見解を以下に示します：http : //jsfiddle.net/DtKrV/2/

誰かがこれが便利だと思ってください！

私はこれをこのようにすることで問題を経験したことがありません：

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

ASP.NET Webフォームを使用する場合、DIVやその他の要素、または固定サイズについて心配する必要はありません。CSSで入力タイプをCheckboxListに<asp:CheckBoxList>設定float:leftすることで、テキストを揃えることができます。

次のサンプルコードを確認してください：

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

.ASPXコード：

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

Twitter Bootstrapを使用している場合は、次のcheckboxクラスを使用できます<label>。

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

入力タイプのチェックボックスをラベル内にラップし、次のように左にフロートします。

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

これは私のために働きました：

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

の高さが（blocklevel）の行の高さと同じであることを確認してください。

チェックボックスの高さと幅をハードコードし、パディングを削除し、その高さと垂直マージンをラベルの行の高さに等しくします。ラベルテキストがインラインの場合、チェックボックスをフロートさせます。Firefox、Chrome、IE7 +はすべて、次の例を同じようにレンダリングします。http：//www.kornea.com/css-checkbox-align

私は通常、チェックボックスをラベルなしのままにし、その「ラベル」を別の要素にします。面倒ですが、チェックボックスとそのラベルの表示方法にはブラウザー間の違いがたくさんあるので（お気づきのとおり）、これがすべての外観を制御できるようになる唯一の方法です。

私も、同じ理由で、Winforms開発でこれを行うことになります。チェックボックスコントロールの基本的な問題は、ボックスとラベルという2つの異なるコントロールであることです。チェックボックスを使用することで、コントロールの実装者に任せて、これらの2つの要素が互いに隣り合ってどのように表示されるかを決定します（そして、間違いを犯します。

誰かがあなたの質問に対してより良い答えを持っていることを本当に望みます。

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>

上記のコードは、リストアイテムを3つの列に配置し、幅を適切に変更します。

以下は、IE9でさえ、ブラウザー全体でピクセル完全な一貫性を提供します。

このアプローチは非常に賢明であり、明白になるほどで​​す。

1. 入力とラベルを作成します。
2. それらをブロックとして表示し、好きなように浮かせることができます。
3. 高さと線の高さを同じ値に設定して、それらが中央に配置され、垂直に揃うようにします。
4. 以下のためのEM測定、要素の高さを計算するために、ブラウザは、これらの要素のフォントの高さを知っている必要があり、それ自体は、EMの測定に設定してはいけません。

これにより、グローバルに適用可能な一般的なルールになります。

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

フォーム、フィールドセット、または要素ごとに適応可能なフォントサイズ。

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

Mac、Windows、Iphone、Androidの最新のChrome、Safari、Firefoxでテスト済み。そしてIE9。

この方法は、1行のテキスト以下のすべての入力タイプに適用できる可能性があります。タイプルールを適用して適合させます。

ですから、これは何度も答えられたことは知っていますが、すでに提供されているソリューションよりもエレガントな解決策があると感じています。そして、1つのエレガントなソリューションだけでなく、2つの個別のソリューションがあなたの空想をくすぐります。そうは言っても、あなたが知る必要があるすべてのものは、コメント付きの2つのJS Fiddleに含まれています。

ソリューション＃1は、指定されたブラウザのネイティブの「チェックボックス」に依存していますが、ひねりを加えています... divに含まれています。これは、クロスブラウザを配置するのが簡単です。オーバーフロー：隠されている1pxの過剰なチェックボックスをチョップします（これは、FFの醜い境界線が見えないためです）

シンプルなHTML：（リンクをたどってコメント付きのCSSを確認します。コードブロックは、stackoverflowを満たすためのものです） http://jsfiddle.net/KQghJ/

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

ソリューション＃2は、「チェックボックストグルハック」を使用して、ブラウザー全体に適切に配置されたDIVのCSS状態を切り替え、チェックボックスがチェックされていない状態とチェックされている状態の単純なスプライトを設定します。必要なのは、チェックボックストグルハックで背景の位置を調整することだけです。私の意見では、チェックボックスとラジオをより詳細に制御でき、ブラウザー全体で同じように見えることを保証できるため、これはよりエレガントなソリューションです。

単純なHTML：（リンクをたどってコメント付きのCSSを確認し、コードブロックはStackOverflowを満たします） http://jsfiddle.net/Sx5M2/

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

誰かがこれらの方法に同意できない場合は、コメントを残してください。他の人がこれらの解決策に出くわしていない理由、またはそうである場合、なぜそれらについてここで答えが見つからないのかについてのフィードバックを聞きたいです。これらのメソッドの1つが失敗したことを誰かが見た場合も、それを見るのは良いことですが、これらは最新のブラウザーでテストされており、私が見た限りではかなり古く、普遍的なHTML / CSSメソッドに依存しています。

ありがとうございます！これも私を永遠に動かしている。

私の特定のケースでは、これは私にとってうまくいきました：

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

私はいくつかの違いを説明するかもしれないreset.cssを使用していますが、これは私にとってはうまくいくようです。

position: relative; IEでz-indexとjQueryのslideUp / slideDownのようなアニメーションの問題がいくつかあります。

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

で使用されるフォントサイズに応じて、スタイリングにはおそらく微調整が必​​要です <label>

PS：IE6でCSSを機能させる
ためにie7jsを使用します。

pokrishkaがすでに示唆したようにvertical-align: sub、単にを使用します。

フィドル

HTMLコード：

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

CSSコード：

.checkboxes input {
    vertical-align: sub;
}

シンプルなソリューション：

<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 以降でテスト済み