将 float:right 样式应用于按钮会弄乱其与相邻文本的垂直对齐方式答案

【问题标题】：Applying float:right style to button is messing its vertical alignment with adjacent text将 float:right 样式应用于按钮会弄乱其与相邻文本的垂直对齐方式
【发布时间】：2012-08-23 06:17:49
【问题描述】：

我想在表格单元格中放置一个文本和按钮。按钮需要向右对齐。如果我将 float:right 样式应用于按钮，则垂直对齐会变差。有什么帮助吗？

这里的 jsfiddle 没有浮动：对，垂直对齐在这里很好： http://jsfiddle.net/5GRHL/2/

这是应用了 float:right 的 jsfiddle： http://jsfiddle.net/5GRHL/3/

【问题讨论】：

标签： html css alignment

【解决方案1】：

我认为最简单的解决方案（但可能不是最干净的）是重新调整按钮。

尝试类似：

button {
  margin-top: -4px;
  float: right
}

【讨论】：

【解决方案2】：

您可以只使用 float:right 并使用定位更正对齐方式：http://jsfiddle.net/5GRHL/23/

【讨论】：

【解决方案3】：

我相信最简单的解决方案是为您的按钮设置一个固定的高度，并将该高度作为文本的行高应用。像这样的：

td
{
    height:50px;
    width:80px;
    vertical-align:middle;
    line-height: 22px;
}
td button 
{
    float:right;
    height: 22px;
}

我更新了小提琴：http://jsfiddle.net/5GRHL/26/

【讨论】：

对于我的类似问题，将 line-height 设置为 200% 即可解决。