在网页开发中遇到这样一个问题，在使用select的时候，想让里面的文字水平居中。首先想到的是text-align:center;但是发现在Chrome浏览器下不兼容，需要使用到text-align-last:center;
select{
width: 400px;
text-align:center;
text-align-last:center;/*兼容chrome*/
}
</style>
<select>
<option value="1">No-1</option>
<option value="2">No-2-我的内容很多哦。哈哈</option>
</select>
<style>
#box{
width: 400px;
border: 1px solid #ddd;
text-align: center;
position: relative;
}
select{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
}
</style>
<div id="box">
<span id="show">No-1</span>
<select>
<option value="1">No-1</option>
<option value="2">No-2-我的内容很多哦。哈哈</option>
</select>
</div>
<script>
window.onload=function(){
var show=document.getElementById('show');
var sel=document.getElementsByTagName('select')[0];
sel.onchange=function(){
var index=sel.selectedIndex; //序号，取当前选中选项的序号
show.innerText=sel.options[index].text;
}
}
</script>
延伸：如何让option的文字居中呢？
服务热线 19970861797
