html - HTML 控件垂直对齐

Question

我在表格单元格的 ont 行中放置了输入和 2 个按钮。我想将它垂直对齐到控制中心。使其高度相同也是可以接受的，并且它的顶部和底部边界应该在一条线上。

实际上按钮放置在输入的下方。

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

score 1 · Accepted Answer

1

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

于 2013-01-14T20:15:59.753 回答

score 0 · Accepted Answer

如果你的意思是垂直对齐元素而不是添加这个：

button, input { display:block; }

或者，如果您想垂直对齐其中的内容，请添加以下内容：

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

score 0 · Accepted Answer

0

vertical-align 将在 Inline-Block 元素中工作：

td{
  vertical-align: middle;
}

于 2013-01-14T20:21:03.580 回答

3 回答 3