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

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; } 

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