CSS - align image icon with select box

Question

EDIT
OK I think I found a solution, found on http://www.student.oulu.fi/~laurirai/www/css/middle/ I used the absolute positioning technique.
I hope it works in IE because I can't check it right now...
The CSS is updated.
END EDIT

I have a language selector in a select box.

On the left side of the box I want a flag with a active language. This will be changed with javascript when the language get's changed.

Only thing that remains is to horizontally align the flag with the select box with CSS - cross browser.

CSS:

.combo {
    background: silver;
    margin: 10px 0;
    position:relative;
    height: 50px;
}

.combo span {
    position:absolute;top:0;bottom:0;margin:auto;
    display: block; float: left;
    width: 16px; height: 11px;
    background:url('flags.png') no-repeat;
}

.combo select {
    position:absolute;top:0;bottom:0;margin:auto;
    margin-left: 25px;
}

.combo span.flag-es {background-position: -16px 0}
.combo span.flag-fr {background-position: -32px 0}
.combo span.flag-gb {background-position: 0 -11px}
.combo span.flag-it {background-position: -16px -11px}
.combo span.flag-nl {background-position: -32px -11px}

HTML:

<div class="combo">
    <span class="flag-it"></span>
        <select>
            <option value="Italiano" selected>Italiano</option>
            <option value="English">English</option>
            <option value="Français">Français</option>
            <option value="Español">Español</option>
            <option value="Nederlands">Nederlands</option>
    </select>
</div>

Do you have a link to `flags.png`? **Edit**: Actually, might not need it. — Chiri Vulpes, Apr 20 '14 at 20:04
How does this look? http://jsfiddle.net/Aarilight/c9V92/ The red will be replaced with flags in your version, of course. — Chiri Vulpes, Apr 20 '14 at 20:08
Eh, you just set some margins based on what? The select box renders differently in any browser, so imo you can't just set the margin-top. — FFish, Apr 20 '14 at 20:36

score 1 · Accepted Answer · answered Apr 20 '14 at 21:10

Since you know the dimensions of your flag, you can place it at 50% height of its container, then nudge it back up half of its own height with a negative margin. You'll need to use absolute positioning for the flag, and position its container (anything other than static — the default). Then, you just need to push the select element to the right — the right margin on the flag won't work because it's positioned absolutely.

.combo {
    background: silver;
    margin: 10px 0;
    position: relative;
}

.combo span {
    width: 16px; height: 11px;
    background: white url('flags.png') no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -5.5px;
}

.combo select {
    margin-left: 26px; // 16px + 10px
}

See working example here: http://jsfiddle.net/9mM2s/1/ Note that in the fiddle, I've commented out declarations that I considered superfluous.

I see you've edited your question to add the same solution as my answer while I was composing it. Great minds think alike :) Cheers! — Daze, Apr 20 '14 at 21:20
Cheers Daze. Your example is even more precise so I am going to use it. — FFish, Apr 21 '14 at 06:16
By the way, [`//` is not a valid CSS comment](http://stackoverflow.com/questions/11218808/do-double-forward-slashes-direct-ie-to-use-specific-css). I used that in this fiddle just for the sake of brevity. — Daze, Apr 21 '14 at 10:24

CSS - align image icon with select box

1 Answers1