html - 表格单元格内包含 float 元素的 anchor 的 100% 高度

Question

我正在寻找使 anchor 内的元素与中间垂直对齐的解决方案。

通常我有一个名称和数值，它们都在同一个表格单元格中，它们必须作为一个整体可点击。名称必须左对齐( float )，数值必须右对齐(文本对齐)。

我正在使用这个解决方案: http://jsbin.com/edecof一切正常，直到名称太长而无法放在一行中。当它分成两行或更多行时，数值保持与顶部垂直对齐，因为 float 元素溢出 anchor 。知道我显然面临着使 anchor 成为表格单元格 100% 高度的挑战。添加 clearfix 元素无济于事，在表格前后添加 clearfix 解决方案也无济于事。

预期的结果是中间的数字也对齐。

有什么想法吗？

Answer 1

这是 WORKING SOLUTION对于需要垂直对齐的问题。

HTML:

<table>
  <tr><td><a href="#"><strong>A man without a name</strong><span>188 cm</span></a></td></tr>
</table>

CSS:

td {border: 1px solid #000; width: 150px; text-align: right;  border-collapse: collapse;}
  td a {display: table-row; text-decoration: none; color: #333; background: #f90; vertical-align:middle;}
    td a strong {width: 60%; display: table-cell; text-align: left;}
td a span{display: table-cell;
    vertical-align: middle;}

逻辑:

要为所讨论的问题添加垂直对齐，即 188cms，您需要在单独的 table-cell 中创建它，或者如果您不想单独创建它，则需要添加一个tag 它应该共存于其中。在这种情况下，您需要将其包裹在 span 标记之间。

希望这对您有所帮助。