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

Question

Я хотел бы использовать встроенные этикетки Bootstrap CSS Framework:

<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