垂直对齐标签中的跨度

Question

这是我的标记。解决方案必须针对跨度中的单线或双线动态工作。所以它应该是可以添加到其中每一个并且工作正常的CSS。从internet上看，这似乎是不可能的。请证明我错了。

<ul style="text-align:center; list-style-type: none;">
    <li style="width: 200px">
        <a href="http://www.bing.com" style="display: block; height:35px; background: Black;">
            <span>Vertical Align This Text</span>
        </a>
    </li>
</ul>

<ul style="text-align:center; list-style-type: none;">
    <li style="width: 200px">
        <a href="http://www.bing.com" style="display: block; height:35px; background: Black;">
            <span>Vertical Align This Text With Double Line As Well</span>
        </a>
    </li>
</ul>

Answer 1

这对我有用：

<ul style="text-align:center; list-style-type: none;">
    <li style="width: 200px; display: table">
        <a href="http://www.bing.com" style="display: table-cell; height:35px; background: Black; vertical-align: middle; text-align:center">
            <span>Vertical Align This Text</span>
        </a>
    </li>
</ul>

<ul style="text-align:center; list-style-type: none;">
    <li style="width: 200px; display: table">
        <a href="http://www.bing.com" style="display: table-cell; height:35px; background: Black; vertical-align: middle; text-align:center">
            <span>Vertical Align This Text With Double Line As Well</span>
        </a>
    </li>
</ul>

为了方便起见，CSS代码：

ul {
  list-style-type: none;
}

li {
  width: 200px;
  display: table;
}

a {
  display: table-cell;
  height: 35px;
  background: black;
  vertical-align: middle;
  text-align: center;
}

Answer 2

由于您包含的 有一个设置的 height 值，因此您可以使用 ol' line-height 技巧将其设置为相同的值值，在本例中：

a { 
    height:35px; 
    line-height:35px; 
}

不过，只有当您的 不比

宽时，这才有效。对于双线，您需要将 设置为 高度的一半 (35px 高度除以2行），所以大约17px。如果您有三行，则适用于 35px/3 ~ 11px。但正如你可以想象的那样，它在某一时刻看起来会被压扁。
因此，根据内容，您可能需要使用相对/绝对定位、较小的字体或更少的内容；）

Answer 3

为您的

和 提供以下 CSS 属性

li{
  position:relative;
}

a{
  position:absolute;
  top:50%;
  margin-top:-17px; /*negative half of your <a> tag height */
}

检查工作示例，网址为 http://jsfiddle.net/r4Wsx/