Bildsymbole werden nicht vertikal mit Menü Beschriftung ausgerichtet

Question

Mein Menü mit Symbolen wie folgt aussieht,

Icons leicht über der Textbeschriftung angezeigt werden. Ich lese die hier gegebenen Tipps, um vertical-align zu verwenden. Und nach der Angabe sowohl line-height als auch vertical-align hat es keine Wirkung.

Plunkercode ist here.

Wie kann ich sicherstellen, dass das Symbol und das Textelement vertikal ausgerichtet sind?

Answer 1

Versuchen Zentrierung Ihre Symbole in Ihrem em Elemente über die background-position Eigenschaft zentriert werden, was sie Ihren Titeltext waren und richten genauso richtig (vorher waren sie in der positioniert zentriert werden dazu führen sollte Ecke links oben):

em[class^='icon-'] { 
    /* omitted for brevity */ 
    background-position: center; 
} 

Sie können see an updated Plunker here und ein Beispiel dafür, wie es unten aussieht;

Answer 2

Ihre Symbole sind Hintergrundbilder auf einem 50px quadratischen Element. Stellen Sie einfach die Hintergrund

em[class^='icon-'] { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    background-repeat: no-repeat; 
    vertical-align : middle; 
    line-height:50px; 
    background-position: center; /* <--- this part */ 
} 

Answer 3

Sie können a em {margin-top:10px;} und sehen Sie verwenden, wenn Sie auf das Symbol möchten und den Wert von margin-top