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％高度，然后以负余量将其轻微移回其自身高度的一半。您需要对标志使用绝对定位，并定位其容器（除静态之外的任何东西 - 默认值）。然后，你只需要将选择元素推到右边 - 标志上的右边距不会起作用，因为它绝对定位。

.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/ 请注意，在小提琴中，我已经注释掉了我认为多余的声明。

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

1 个答案: