Vertikal

Question

Ich möchte die Inline -Etiketten des Bootstrap CSS -Frameworks verwenden:

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

Leider sind diese Etiketten nicht vertikal zentriert, wenn sie zusammen mit anderen Elementen verwendet werden.

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

Bitte beachten Sie den vollständigen Code für ein visuelles Beispiel: http://jsfiddle.net/kvppm/

Ich bin mir der Leitungshöhe und der absoluten/relativen Positionierungs-Problemumgehung bewusst, konnte sie jedoch nicht richtig anwenden.

Wie kann ich diese Etiketten vertikal zentrieren?

Answer 1

Seit <span> ist ein inline Standardmäßig können Sie einfach:

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

Und es sollte funktionieren. http://jsfiddle.net/kvppm/1/

Aber dann <a> Innerhalb <span> ist nicht semantisch korrekt. Sie können einfach verwenden <a> und stylen Sie es display: inline.

http://jsfiddle.net/kvppm/3/

Answer 2

.label { vertical-align: top; } 

Das funktionierte für mich, als ich wollte, dass es in einem UL ordnungsgemäß ausgerichtet wird