Question

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

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

我正在使用此解决方案： http://jsbin.com/edecof其中一切正常，直到名称太长而无法放在一行上。当它断开到两行或更多行时，数值保持垂直对齐到顶部，因为浮动元素溢出了锚点。知道我明显面临挑战，要使锚固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标记之间。

希望这有帮助。

Answer 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;}

Answer 3

此关键通常是CSS中的line-height属性，并与vertical-align:middle结合使用。（JS：.lineHeight，.verticalAlign）

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

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;

表格单元格中包含浮动元素的锚点的高度为100％

3 个答案: