2

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

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

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

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

有任何想法吗？

4

3 回答 3

2

这是需要垂直对齐的问题的工作解决方案。

的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标签之间。

希望这可以帮助。

于 2013-06-10T08:49:23.043 回答
1

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;}
于 2013-06-10T09:37:16.017 回答
0

这样做的关键通常是line-heightCSS 中的属性，结合vertical-align:middle. （JS ：，.lineHeight）.verticalAlign

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

HTML DOM 因与 100% 高度作斗争而臭名昭著；大多数（全部？）解决方案在父级没有明确的像素高度的情况下失败。

在页面被渲染后可以使用 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;
于 2013-06-10T08:44:11.470 回答