Background icon image and caption text are not aligned vertically

Question

Plunker code is here .

I am trying to create a dropdown with an icon in the front. I am facing an issue where the vertical alignment for icon is good but for the caption, the text is displayed below the middle line as,

The caption Select One is below the middle line. How can i move it up, so that it is at same level as the icon?

Answer 1

Please update the following code in your css..

.grouped-list-btn-content > .grouped-list-text {
    margin-top: 6px;
}

Answer 2

There is a margin-top on the text of 9px:

.grouped-list-btn-content > .grouped-list-text {
    margin-left: 5px;
    margin-top: 9px;
}

change it to 5px:

.grouped-list-btn-content > .grouped-list-text {
    margin-left: 5px;
    margin-top: 5px;
}

Answer 3

If an item is inline-block and not float ing you may use vertical-align: middle .

It seems you are using a CSS framework and it is float ing, then you can use line-height: #replace this with height of the icon in px# , given that icon height is fixed. Use line-height to center text vertically with something that is taller than it.

See Plunker

Answer 4

Groups list text in your css file:

.grouped-list-btn-content   > .grouped-list-text {
   margin-left: 5px;
   margin-top: 9px;
}

Change the amount in margin top for example 5 should make it more centered.