3

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

单选按钮的大小设置为 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 版本中，上面的渲染是这样的

我期望看到的结果是... IE 在该图像上显示的结果？严重地？

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

4

5 回答 5

2

一个快速的解决方法是使font-size:12px;td 和width:16px;height:16px;radio 相等。

2个例子：

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

和

td {
  font-size: 16px; /* resize font-size */
}
input[type=radio] {
  width: 16px;
  height: 16px;
}
于 2010-06-30T20:19:41.500 回答
2

谷歌搜索“vertical-align:middle”发现Gavin Kistner 的简短解释，这很有用。我在那个页面上尝试了最后的建议，它似乎在 Chrome、IE、Firefox、Opera 和 Safari 中都可以很好地呈现。

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

于 2010-06-30T20:23:52.157 回答
1 
<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

为什么不将文本放在它自己的列中。

于 2010-06-30T20:12:57.393 回答
0

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

<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>
于 2010-06-30T20:07:35.133 回答
0

在黑暗中快速拍摄：

  • 给无线电输入元素它自己的表格单元格？然后至少文本应该相互对齐。
  • 把vertical-align:middle;totd而不是.radio? 可能仍然会导致问题，因为带有无线电输入元素的单元格中文本的基线可能仍然由输入元素确定...
于 2010-06-30T20:07:56.517 回答