Can't get the link to vertical align

Question

I'm trying to create a language bar dropper, that will show links to alternative versions of my site. So far, I have:

<div id="lang_dropper_wrapper">
    <img src="http://www.chambresdhotesdev.org/new_design/blank.gif" class="sprite-luna">
    <b class="down_arrow" style="float: right;">&nbsp;</b>
    <div id="lang_dropper">
        <a class="smaller lang-en" href="#">English</a>
        <a class="smaller lang-fr" href="#"> French</a>
        <a class="smaller lang-es" href="#">Cases rurals</a>
        <a class="smaller lang-mobile" href="#">Mobile</a>
    </div>
</div>

...and then the CSS:

.lang-en:before, .lang-es:before, .lang-fr:before,.lang-mobile:before {
    content: ' ';
    /*background: url(/new_design/sprites-all-2.png) no-repeat;*/
    width: 32px;
    height: 26px;
    display: inline-block;
    margin-right: 20px;
}

.lang-en:before {
    background: green
}

.lang-es:before{
    background: red;
}

.lang-fr:before{
    background: yellow
}

.lang-mobile:before{
    background: maroon;  
}

#lang_dropper a:link {
    display:block;
    padding: 5px 5px 5px 10px;
    font-size: 12px;
    line-height: 30px;
    text-align: middle;
}
#lang_dropper a:hover {
    text-decoration: none;
    background: #eee;
}
#lang_dropper {
    position: absolute;
    top: 28px;
    left: 0px;
    z-index: 10000000;
    /*display: none;*/
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
    width: 200px;
}
#lang_dropper_wrapper {
    position: relative;
    width: 45px;
    float: left;
    margin-right: 3px;
    margin-top: 2px;

}
#lang_dropper_wrapper:hover {
    cursor: pointer;
}

I am actually using a CSS sprite for the flag icons - thus the confusing stuff in there with the :before stuff, and a class for each one.

My only remaining issue - is getting the bleedin thing to vertically align!

You can see a working example here:

http://codepen.io/anon/pen/BjQgRe

It works perfectly, apart from the fact I want the text to be vertically aligned with the flag colored icons to the left of them

I've tried all kinds of things, but just can't get it to work.

Suggestions?

Thanks!

Answer 1

Apply vertical-align:middle for your inline block elements.

.lang-en:before, .lang-es:before, .lang-fr:before,.lang-mobile:before {
content: ' ';
width: 32px;
height: 26px;
display: inline-block;
margin-right: 20px;
vertical-align:middle; /* Add this style */
}

DEMO