搜索

首页  >  问答  >  正文

前端 - Safari:select下拉框的字体不能居中。

在chrome上使用text-align没有用,后来试了下text-align-last:center有作用,但是在Safari上 是无效的;

Google后也没发现什么有价值的,有哪位遇到过吗?

为情所困为情所困2783 天前1281

全部回复(2)我来回复

  • 漂亮男人

    漂亮男人2017-05-16 13:26:50

    有一个hack的办法

    在select的位置写一个span,用js去绑定span里的值和select的值,让span元素居中,隐藏掉select。

    大约是这样的:

    js的内容就自己写一下吧

    .pesu-select {  
        text-align: center;    
        border:solid 1px #000;  
    }  
    .pesu-select select {  
        position: absolute;  
        left: 0px;  
        top: 0px;  
        width: 100%;  
        height: 42px;  
        opacity: 0;  
    }  
       
    <p class="pesu-select">  
        <span>aaa</span>  
        <select>  
            <option value="1">aaa</option>  
            <option value="2">bbb</option>  
            <option value="3">ccc</option>  
        </select>  
    </p> 
    

    回复
    0
  • 習慣沉默

    習慣沉默2017-05-16 13:26:50

    其他途径解决问题:select外面包一层p,select的宽度不设置(由内容撑开),设置容器的宽度与text-align:center;

    回复
    0
  • 取消回复