我正在集思广益,想出在 anchor 内垂直对齐文本的最佳方式,并使该方法与跨浏览器兼容 (ie7+)。到目前为止,我想出的最好方法是在 anchor 内创建一个人造元素,然后将 anchor 的内容包装在一个跨度中(<ins>
只是一个内联元素)。
<a href="#"><ins></ins><span>blah</span></a>
通常,简单的填充可以完成此操作,但在我的测试用例 (http://jsfiddle.net/2jnSP/1/) 中,其中一个 anchor 有多行文本。
所以,如果您有任何更好的想法,请将它们提出来!
最佳答案
编辑:
我在这里做了一个例子: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
}
关于html - 垂直对齐 anchor 内的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11770160/