CSS属性在iOS设备不生效，谷歌翻译移动端下拉框无法居中

针对iOS浏览器中谷歌翻译下拉框居中样式不生效的问题，可尝试以下几种适配方案：

方案一：通过文本缩进模拟居中 #

iOS Safari等浏览器对text-align-last支持有限，可利用text-indent结合计算值实现居中效果：

#google_translate_element_mobile .goog-te-gadget .goog-te-combo {
    width: 100%;
    padding: 0;
    border: none;
    /* 50%为容器中点，2em可根据选项文本长度微调 */
    text-indent: calc(50% - 2em);
}

方案二：父容器用Flex布局强制居中 #

如果直接修改下拉框样式无效，可给父容器添加Flex布局，强制下拉框内容居中：

#google_translate_element_mobile .goog-te-gadget {
    display: flex;
    justify-content: center;
    width: 100%;
}

#google_translate_element_mobile .goog-te-gadget .goog-te-combo {
    width: auto;
    padding: 0 1em;
}

方案三：添加WebKit前缀并配合方向属性 #

尝试添加iOS兼容前缀，结合文本方向属性做降级处理：

#google_translate_element_mobile .goog-te-gadget .goog-te-combo {
    text-align: center;
    width: 100%;
    text-align-last: center;
    -webkit-text-align-last: center;
    /* 通过方向切换触发居中逻辑 */
    direction: rtl;
    text-align: left;
    direction: ltr;
}

以上方案均针对iOS浏览器的样式支持特性设计，可根据实际布局场景选择测试。

内容的提问来源于stack exchange，提问作者Anurag