html select 文字居中显示图片,如何让select文字居中

做手机端遇到一个问题，如何把select的文字居中，自带的select控件真是很恶心，总结一下目前网上的几种办法：

赶时间的小伙伴可以直接拖到最下面

方法一：

select:{

width: auto;

padding: 0 2%;

margin: 0;

}

option{

text-align:center;

}

1.必须设置select的padding，留意：padding: 0 2%; 前面的0表示上下，后面的值表示左右，这个值设置为1%都可以，但是不能是0,值越大，select就越长。

2.不要设置select的宽(width)，auto就可以了。

这种方法就是给左右padding，使文字居中，可是这个值不好控制

方法二：

select{

width:auto;

height:24px;

line-height:24px;

text-align:center;

text-align-last: center;

}

这个在安卓上面可以居中，ios上面没有效果，用伪类解决也无效

方法三：

这个方法是我自己琢磨出来的，在外面套一个盒子label，id指向这个select

label{

width:100%;

text-align:center;

}

这个实现了居中显示，可是点击label，IOS上面可以弹出控件，安卓不会弹出select控件

方法四：使用JS模拟

最终我是用这个方法解决的，直接上代码

HTML代码：

-请选择-

-请选择-

男

女

CSS：

.select-div {

width: 100%;

text-align: center;

border: 1px solid #eee;

position: relative;

}

select.txt {

position: absolute;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

opacity: 0;

}

JS：

$('#sex').change(function () {

var index = $('#sex option:selected').index(); //序号，取当前选中选项的序号

$('#select-show').html($('#sex option:selected').html());

})

就可以简单模拟实现select居中的效果了,如果有更好的办法，希望大佬来补充