html - 在 `` 元素中居中文本(Webkit 和 IE)

Question

我有一个 <select>元素:

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

然后我给它一个宽度并将它居中:

select {
    width: 400px;
    text-align: center;
}

居中只发生在 Firefox 中，而不是 Webkit 或 IE。 ( Fiddle )

如何让 Webkit 和 Internet Explorer 中的选项居中？

Answer 1

据我所知，我建议您创建自己的类似选择的元素，而不是尝试将选择按钮居中作为解决方法。您可以使用 javascript(这里是 jQuery，您仍然可以使用纯 javascript，这将是更快的代码)。

html:

<div class="dropdown">
    <div class="dropdown-title">Dropdown menu</div>

    <div class="dropdown-menu">
        <div class="option">Option 1</div>
        <div class="option">Option 2</div>
    </div>

    <input type="hidden" class="dropdown-select" />
</div>

样式:

.dropdown-title {
    padding: 5px;
    border: 1px solid black;
}
.dropdown-menu {
    display: none;
}
.option {
    border: 1px solid grey;
    text-align: center;
    padding: 3px;
}

js:

$('.dropdown-title').on('click', function() {
    $(this).next('.dropdown-menu').toggle();
});
$('.option').on('click', function() {
    $(this).closest('.dropdown-menu').hide();
    $(this).parents('.dropdown').find('.dropdown-title').html($(this).html());
    $(this).parents('.dropdown').find('.dropdown-select').val($(this).html());
});

在这种情况下使用 jQuery:http://jsfiddle.net/U44Yr/