在標簽中垂直對齊跨度

Question

這是我的標記。 解決方案必須針對跨度中的單行或雙行動態工作。 因此，應該將css添加到其中的每一個中，並能正常工作。 從看待實習生看來，這似乎是不可能的。 請證明我錯了。

<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/查看工作示例