вертикальный центральный промежуток (начальная метка) вместе с другими элементами

Question

Я бы хотел использовать встроенные метки фреймворка начальной загрузки css:

<span class="label">Default</span>

К сожалению, эти метки не центрированы вертикально при использовании вместе с другими элементами.

<p>
  <span class="label"><a href="#">test</a></span>This is a test heading.
</p>

Пожалуйста, смотрите полный код для визуального примера: http://jsfiddle.net/kvPpm/

Мне известны обходные пути по высоте линии и абсолютному / относительному позиционированию, но я не смог их правильно применить.

Как я могу вертикально отцентрировать эти метки?

Answer 1

Поскольку <span> является элементом inline по умолчанию, вы можете просто сделать:

span { vertical-align: middle|top|bottom; }

И это должно работать.http://jsfiddle.net/kvPpm/1/

Но тогда <a> внутри <span> не является семантически правильным.Вы можете просто использовать <a> и стилизовать его display: inline.

http://jsfiddle.net/kvPpm/3/

Answer 2

.label { vertical-align: top; } 

Это сработало для меня, когда я хотел, чтобы оно было правильно выровнено в ul