Image icons are not vertically aligned with menu caption

Question

My menu with icons looks like,

Icons are displayed slightly above the text caption. I read the tips given here, to use vertical-align. And after specifying both line-height and vertical-align, it doesn't have any effect.

Plunker code is here.

How can i ensure the icon and the text item are vertically aligned?

`background-position: center;`? – Joseph Marikle Apr 14 '16 at 14:00 — Joseph Marikle, Apr 14 '16 at 14:00

score 2 · Accepted Answer · answered Apr 14 '16 at 14:02

Try centering your icons within your em elements via the background-position property, which should cause them to be centered just as your caption text were and align properly (previously they were positioned in the top-left corner) :

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

You can see an updated Plunker here and an example of what it looks like below ;

score 1 · Answer 2 · answered Apr 14 '16 at 14:01

Your icons are background images on a 50px square element. Just set the background to be centered

 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 */
 }

score 0 · Answer 3 · edited Apr 14 '16 at 14:56

0

You can use a em {margin-top:10px;} and see when you want the icon and change the value of margin-top

edited Apr 14 '16 at 14:56

wiredniko

2,491
3
19
37

answered Apr 14 '16 at 14:10

Image icons are not vertically aligned with menu caption

3 Answers3