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

Question

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

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

在框的左侧，我想要一个带有活动语言的标志。更改语言时，这将使用 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/ 请注意，在小提琴中，我已经注释掉了我认为多余的声明。