Вертикально выровнять диапазон в теге

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/