时间戳

首页 > 解决方案 > iphone (Safari) 不将 FontAwesome 图标居中

css - iphone (Safari) 不将 FontAwesome 图标居中

问题描述

我有一个带有 FontAwesome 图标的简单按钮。

<!DOCTYPE HTML>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<style>
    .myButton {
        width: 34px;
        height: 34px;
        border-radius: 4px;
        border: 0;
        color: #357CA5;
        background-color: rgba(0, 0, 0, 0.08);
        text-align:center;

        /* if I comment out the following line, the arrow will be shown in the middle */
        font-size: 1em;
    }

    .myButton:hover {
        background: #357CA5;
        color: #FFFFFF;
        cursor: pointer;
        box-shadow: 0 4px 6px -5px rgba(0, 0, 0, 0.6);
    }
</style>
</head>
<body>
<button class="myButton">
  <i class="fas fa-arrow-left" aria-hidden="true"></i>
</button>
</body>
</html>

在所有浏览器中，图标都会显示在中间，除了 Iphone 上的 Safari。图标在右侧。

其他浏览器https://i.stack.imgur.com/X2FXK.png

苹果浏览器：https ://i.stack.imgur.com/KFxq8.png

如果我删除该行

font-size: 1em;

图标显示在中间。你知道我做错了什么吗？

标签： cssiphonefont-awesome

解决方案

将这些添加到按住按钮的 div 的行中解决了移动 Safari 中的问题：

display: flex;
justify-content: space-around;

因此，整个元素最终如下：

.message-btn {
    display: flex;
    justify-content: space-around;
    margin-top: 0;
    width: 35px;
    height: 35px;
    background-color: white;    
    border-radius: 5px;
    border-width: 1px;
    border-color: #a3c862;
    color: #a3c862;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: 0.1s all ease-in-out;
    transition: all .1s ease-in-out;
    font-size:18px;
}

推荐阅读