Html 在定位点内垂直对齐文本

我正试图集思广益，找出在锚定中垂直对齐文本的最佳方法，并找出跨浏览器兼容的方法（ie7+）。到目前为止，我想到的最好的方法是在锚内创建一个人造元素，然后将锚的内容包装在一个范围内（

只是一个内联元素）

通常，简单的填充可以实现这一点，但在我的测试用例（）中，其中一个锚点有多行文本

所以，如果你有更好的想法，就把它们扔出去吧

编辑：

<!--[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>

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

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

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

我在这里举了一个例子：

它对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>

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

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

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

---

对这个问题可能不有用，但对其他问题可能有用的原始答案：

<!--[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>

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

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

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

---

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>

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

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

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

---

在任意数量的情况下，多行定位元素的行数是否相同？此外，为什么要使用

元素，而不是

或

等？其目标是使其具有适度的动态性，并使文本垂直居中，而不管有多少行。您可以使用跨度或任何其他内联元素（语义）代替INS，但是它工作得很好。我不认为这是解决问题的最佳方式。如果您必须在每页多次执行此操作，则会有太多添加的标记被吐出