表格单元格中包含浮动元素的锚点的 100% 高度答案

【问题标题】：100% height for an anchor containing floated element within table cell表格单元格中包含浮动元素的锚点的 100% 高度
【发布时间】：2013-06-05 20:56:46
【问题描述】：

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

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

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

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

有什么想法吗？

【问题讨论】：

预期的结果也是对齐中间的数字？
是的，没错。我要编辑问题。
188cm 不应该在单独的单元格中吗？
@Pete 因为它必须作为一个整体可以点击，所以它不能在两个单独的单元格中。不仅如此，它根本没有帮助，因为具有名称的单元格将高于数值，该数值仍将垂直对齐到顶部。
@Iceman 如果这是表格数据，那么您应该正确使用表格，否则为什么要使用表格。如果您有两列，它们将并排排列，然后您可以将列垂直对齐到中间。只需将链接添加到两列或使用 javascript 解决方法，这样当单击该行时，您将被重定向到链接想要去的位置

标签： html css

【解决方案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;}

逻辑：

要为相关问题添加垂直对齐方式，即 188 厘米，您需要在单独的 table-cell 中创建它，或者如果您不想单独创建它，您需要在其中添加一个 tag共存。在这种情况下，您需要将其包装在 span 标记之间。

希望这会有所帮助。

【讨论】：

这使得锚点确实是 100% 的高度，尽管数值仍然与顶部垂直对齐。
不幸的是，display:inline-block 在许多旧浏览器中不受支持（cough IE cough），因此您可能需要考虑到这一点...
@Steve - 以他为例，我暂时删除了inline-block。但对于较旧的 IE，我建议 hasLayout 可能会为 inline-block 声明解决问题。 satzansatz.de/cssd/onhavinglayout.html
是的，inline-block 可以工作 - 我经常使用它。只是一个设计考虑，而不是拖钓:)
@Iceman - 欢迎来到 SO。如果您能接受最能帮助您解决原始问题的答案，社区将不胜感激：)

【解决方案2】：

HTML：

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

CSS

    td { width: 150px; text-align: right;}
  td a {display: block; text-decoration: none; color: #333; background: #f90; border:solid 1px; }

a td{text-align:left;padding-right:5px;}

【讨论】：

【解决方案3】：

这个关键通常是CSS中的line-height属性，结合vertical-align:middle。 (JS:.lineHeight,.verticalAlign)

line-height 以 px 为单位，应该等于父级的高度。您可能需要将元素设置为display:block，但如果是floated，我认为它会立即生效。

HTML DOM 因struggling with 100% height 而臭名昭著；大多数（全部？）解决方案在父级没有明确的像素高度时都会失败。

可以在页面渲染后使用 Javascript 来匹配孩子的 .lineHeight 到它的 parentNode.offsetHeight，但一般来说，使用 Javascript 设置页面的样式不如使用 CSS 优雅。

编辑

然后，为了进一步详细说明 JS 解决方案，这样的事情可以让你开始：

var element = document.getElementById('yourelement');
var h = element.parentNode.offsetHeight + 'px';
element.style.height = h;
element.style.lineHeight = h;

【讨论】：

父级的高度未知，所以我认为我应该使用 JavaScript 解决方案。