html - HTML コントロールの垂直方向の配置

Question

テーブルセルのオンラインに入力と2つのボタンが配置されています。コントロールセンターで縦に並べたい。同じ高さにして、上下の境界線が 1 行になるようにすることもできます。

実際には、ボタンは入力より少し下に配置されています。

HTML:

<td>
  <input type="text" />
  <button>save</button>
  <button>cancel</button>
</td>

CSS:

td input[type="text"]
{
  height: 18px
  margin: 0px
  padding: 0px
  border: none width: 50px;
}
td button
{
  height: 18px;
  ?????
}

Answer 1

td input[type='text'], td button{
  vertical-align: middle;
}

Answer 2

これを追加するよりも、要素を垂直に整列させることを意味する場合：

button, input { display:block; }

または、コンテンツを垂直方向に整列させる場合は、次を追加します。

button, input { display: inline-block; vertical-align: middle;}

Answer 3

vertical-align は Inline-Block 要素で機能します:

td{
  vertical-align: middle;
}