CSS - 将图像图标与选择框对齐

Question

编辑
好的，我想我找到了一个解决方案，在 http://www.student.oulu.fi/~laurirai/www/css/middle/ 上找到我使用了绝对定位技术。
我希望它能在 IE 中运行，因为我现在无法检查它...
CSS 已更新。
结束编辑

我在选择框中有一个语言选择器。

在框的左侧，我想要一个带有事件语言的标志。当语言发生变化时，这将通过 javascript 进行更改。

唯一剩下的就是使用 CSS - 跨浏览器将标志与选择框水平对齐。

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>

Answer 1

由于您知道旗帜的尺寸，因此可以将其放置在其容器高度的 50% 处，然后将其向上推回其自高度度的一半，并留有负边距。您将需要对标志使用绝对定位，并定位其容器(除静态之外的任何内容 — 默认设置)。然后，您只需将 select 元素推到右侧 — 标志上的右边距将不起作用，因为它是绝对定位的。

.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
}

请参阅此处的工作示例:http://jsfiddle.net/9mM2s/1/请注意，在 fiddle 中，我注释掉了我认为多余的声明。