Question

我有这个样本：

代码HTML：

<div class="select-style6">
              <select name="office" id="office">
                      <option value="0">Please select:</option>
                      <option value="9">oofffjjgh</option>                                            
                      <option value="10">test</option>                                            
                      <option value="11">test</option>                                            
                      <option value="13">test</option>
             </select>
</div>

CODE CSS：

.select-style6 {
    background-image: url("/public/images/arrow-field.png"), linear-gradient(to right, white 79%, white 70%, gray 71%, lightgray 71%, lightgray 100%);
    background-position: 149px center, center center;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 183px;
    height: 33px;
}

.select-style6 select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    line-height:normal;
}
.select-style6 select:focus {
    outline: none;
}

我想在所有浏览器上将文本与中心（垂直）对齐。

什么是最佳解决方案？

我尝试添加padding: 8px但不行，我想要另一种方法。

你能帮我解决一个最适合各地工作的解决方案吗？

提前致谢！

Answer 1

只需删除填充并将行高设置为等于它的高度。您的欢迎:)）

.select-style6 select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    line-height:33px;
}

修改嗨，我刚刚在IE中测试过，但遗憾的是我们无法在IE中更改select的对齐方式。正如所料，IE永远不会让我们失望！

Answer 2

做这样的事情：

.select-style6{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

Flex适用于大多数浏览器

Answer 3

你可以用位置：相对; 看其他内容这个位置最高：50％; 左：50％; text-align：center;

如何修复框中的中心选择文本？

3 个答案: