Wie platziere ich Text zentriert über ein Bild?

Question

Ich versuche, Text über ein Schaltflächenbild zu platzieren. Ich schaffe es, es von links nach rechts auf dem Knopf auszurichten, aber die vertikale Ausrichtung macht den Rest nicht richtig. Gibt es einen Weg im CSS, um diesen Text vertikal zentrieren zu können?

.selectedTabOnPlacementMenu 
{ 
    background: url('/Content/Images/Blank_Yellow.png') no-repeat; 
    width:88px; 
    height:28px; 
    text-align:center; 
    font-weight:bold; 
} 

Answer 1

Wenn es sich um eine einzelne Textzeile ist, können Sie line-height gesetzt.

<div style="height:50px;background-color:#ccc;"> 
    <p style="line-height:50px;">test</p> 
</div> 

Es ist viel schwieriger zu vertikal Mitte mehr Textzeilen.

Answer 2

können Sie margin-top verwenden: 5px; oder padding-top: 5px; (abhängig davon, wie dein div eingestellt ist) in der div, wo du deinen Text runter drücken musst.

Prost

Answer 3

Einfach den Code

line-height:28px; 

in Ihrer Klasse.