1

私は持ってDivいますdisplay:table

JSBIN

ここに画像の説明を入力

<div class='wrapper'>
   <input type="checkbox" class="b"  />
   <span class="c" >aaa bbb ccc</span>
  </div>

そしてこのCSS:

.wrapper
{
  display: table; 
  border:solid 1px red;
  height:40px;
  width:200px;
}

.b
{
 border:solid 1px green;
 display: table-cell;
 vertical-align: middle; 
}

.c
{
  display: table-cell;
  vertical-align: middle; 
}

ご覧のとおり - と の両方が.bあり.cますdisplay: table-cell; vertical-align: middle;

質問

checkboxが であるのに、が垂直方向に整列しないのはなぜspanですか?

注意

パディングなどを使用してチェックボックスを手動で整列できることはわかっています。しかし、テーブルセルと垂直方向の配置を使用したソリューションを探しています(これは機能するはずです)

4

2 に答える 2

2

これを試して:

.wrapper
{
  display: table-cell;
  border:solid 1px red;
  height:40px;
  width:200px;
  vertical-align: middle; 
}

.b
{  
  border:solid 1px green;
}

div span
{
  border:solid 1px gray;
}

作業: http://jsbin.com/IdOFUmi/11/edit

実際には の.wrapperように動作することを望んでいます。table-cellこの場合、その子を中央に配置できます。

于 2013-09-11T14:21:59.767 に答える
2

テーブルからテーブルセルまで高さを継承する必要があります。

.wrapper
{
  display: table; 
  border:solid 1px red;
  height:40px;
  width:200px;
}
.b
{ 
  border:solid 1px green;
  display: table-cell;
  vertical-align: middle; 
  height: inherit;
}
.c
{
  display: table-cell;
  vertical-align: middle; 
  height: inherit;
}

http://jsbin.com/IdOFUmi/23/editでデモを参照してください。

その理由は、input要素が他のインライン要素とまったく同じように動作しないためです。何らかの理由で、表のセルに高さを設定すると問題が解決します。

私が提供できる最良の説明は、CSS テーブル モデルと欠落しているテーブル要素の生成に関する私の読書に基づいています。

http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

この場合、input置換された要素である要素を表のセルにすることはできません。その結果、匿名のテーブルセル ラッパーが CSS エンジンによって内部的に生成されます。

ただし、匿名のテーブルセルは親テーブルの高さを認識していないようです。

要素に高さが指定されている場合、無名のテーブル セルがそれを適用します。

この説明の最良の証拠は、次の CSS でも同じ結果が得られることです。

.b
{ 
  border:solid 1px green;
  /* display: table-cell; OMIT THIS */
  vertical-align: middle; 
  height: inherit;
}

明示的なdisplay: table-cellプロパティがないと、匿名要素が描画され、垂直方向の配置を機能させるには高さプロパティが必要になります。

于 2013-09-11T14:25:05.327 に答える