垂直对齐标签中的跨度

Question

所以这是我的标记。解决方案必须动态地为跨度中的单行或双行工作。所以它应该是css，可以添加到每个这些并且工作正常。从查看internez这似乎是不可能的。请证明我错了。

<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

由于您的<a>包含height设置值，因此您可以使用ol'line-height技巧将其设置为相同的值，在这种情况下：

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

但是，如果您的<span>不比<li>宽，那么这只会有效。对于双线，您需要将<line-height>设置为<a>高度的一半（ 35px 高度除以 2 线），所以大约17px。如果你有三行，它将适用于 35px / 3 ~11px。但正如你可以想象的那样，它会在某一点看起来变得黯然失色。 因此，根据相对/绝对定位所需的内容，较小的字体或较少的内容;）

Answer 3

为您的<li>和<a>提供以下CSS属性

li{
  position:relative;
}

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

检查http://jsfiddle.net/r4Wsx/

处的工作示例