Question

我正在尝试垂直放置一个超链接，因此它位于文本框高度的中间，但它对我不起作用。

这是jsfiddle示例。我想在不使用Javascript的情况下执行此操作，在IE6 +中工作，两个元素需要在同一个td列中，不使用硬编码像素，并且超链接紧邻文本框的右边缘（如图所示）例如，只需将其向上移动到黄色框的中间）。

Answer 1

只要textarea和元素是内联元素，它们就会分享它们的基线。如果浮动元素，则可以设置a元素的行高以匹配textarea的高度：

textarea { float :left; }
a { float: left; line-height: 6em; }

演示：http://jsfiddle.net/Guffa/aLtXA/6/

Answer 2

好吧，如果愿意嵌套表，那么这将有效：

<table>
  <tr style="vertical-align:top">
    <td>  
      <table>
        <tr style="width: 500px;">
          <td>
            <textarea cols="45" rows="5"></textarea>
          </td>
          <td style="background-color:yellow; vertical-align:middle">
            <a href="">Edit</a>
          </td>
        </tr>
      </table>
    </td>
    <td>
      second cell
    </td>
  </tr>
</table>

但我讨厌这个级别的嵌套地狱。它会导致疯狂和白发。

我希望有人能发布一个更好的答案。是否有可能使用twitter bootstrap?

Answer 3

在这里：http://jsfiddle.net/aLtXA/16/

我将垂直对齐：中间放在TEXTBOX和锚点上。同样，我从表格单元格中删除了vertical-align。

如何在文本框的中间放置超链接？

3 个答案: