Question

假设你有两个简单的表格单元格彼此相邻一个包含单选按钮和文本。另一个只包含文字。

单选按钮的大小设置为16x16像素（不要问我为什么，假设它只是）。
字体大小为12像素。

如何使两个标签和单选按钮在所有主要浏览器中沿着（或合理地接近）表格行的垂直中间一致排列？

示例HTML让您入门：

<style type="text/css">
td {
  font-size: 12px;
  font-family: Verdana;
}

.radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0px;
}

.blah {
  text-decoration: line-through;
}
</style>

<table>
  <tr>
    <td>
      <input type="radio" class="radio" />
      <span class="blah">O</span>
    </td>
    <td>
      <span class="blah">O</span>
    </td>
  </tr>
</table>

在我安装的IE版本，Opera，Firefox和Chrome中，上面的内容呈现this

我期待看到的结果是...... IE上显示的图像？严重？

其余的看起来足够接近，但是我对文本进行排序的任何尝试都使得它在4个浏览器中至少有2个看起来很糟糕。

Answer 1

快速解决方法是使无线电的td和font-size:12px;的{{1}}相等。

2个例子：

width:16px;height:16px;

和

td {
  font-size: 12px;
}
input[type=radio] {
  width: 12px; /* resize radio */
  height: 12px;
}

Answer 2

谷歌搜索“垂直对齐：中间”由Gavin Kistner找到this short explanation，这很有用。我在该页面上尝试了最终建议，这似乎在Chrome，IE，Firefox，Opera和Safari中引人注目。

我所做的是添加td{ line-height:1.5em } - 请参阅链接以获取解释。

Answer 3

<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

为什么不将文本放在自己的专栏中。

Answer 4

实现此目的的一种方法是将嵌套表添加到两个单元格中的第一个，并将单选按钮和第一个跨度放在两个单元格中（在嵌套表格中）

<table> 
  <tr> 
    <td> 
      <table><tr><td><input type="radio" class="radio" /></td>
      <td><span class="blah">O</span></td></tr></table>
    </td> 
    <td> 
      <span class="blah">O</span> 
    </td> 
  </tr> 
</table>

Answer 5

在黑暗中快速拍摄：

将无线电输入元素提供给自己的表格单元格？那么至少文本应该相互排列。
将vertical-align:middle;放到td而不是.radio？可能仍然会导致问题，因为带有无线电输入元素的单元格中文本的基线仍可能由输入元素确定...

HTML - 对齐单选按钮和文本

5 个答案: