html - 垂直对齐 anchor 内的文本

Question

我正在集思广益，想出在 anchor 内垂直对齐文本的最佳方式，并使该方法与跨浏览器兼容 (ie7+)。到目前为止，我想出的最好方法是在 anchor 内创建一个人造元素，然后将 anchor 的内容包装在一个跨度中(<ins> 只是一个内联元素)。

<a href="#"><ins></ins><span>blah</span></a>

通常，简单的填充可以完成此操作，但在我的测试用例 (http://jsfiddle.net/2jnSP/1/) 中，其中一个 anchor 有多行文本。

所以，如果您有任何更好的想法，请将它们提出来!

Answer 1

编辑:

我在这里做了一个例子:http://jsfiddle.net/Egqjf/1/ .

它为 IE < 8 使用了一些条件注释，为现代浏览器使用了 display: table 等。

这可以根据您拥有的元素进行调整。

HTML:

<!--[if lt IE 8]>
<style type="text/css">
.inner {
    position: absolute;
    top: 50%
}
.content {
    position: relative;
    top: -50%
}
</style>
<![endif]-->
<div class="wrapper">
    <!--[if lt IE 8]>
    <div class="inner">
    <![endif]-->
        <div class="content">
            <div>blah blah (line 1)</div>
            <div>lorem ipsum (line 2)</div>
        </div>
    <!--[if lt IE 8]>
    </div>
    <![endif]-->
</div>

CSS:

.wrapper {
    display: table;
    position: relative;
    width: 150px;
    height: 200px;
    background: green
}
.content {
    display: table-cell;
    vertical-align: middle
}

---

原始答案可能对这个问题没有用，但可能对其他问题有用:

---

HTML:

<a href="#">blah</a>

CSS:

a {
    display: block;
    height: 50px;
    line-height: 50px
}