Question

我有一个带有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

野生动物园iphone：https://i.stack.imgur.com/KFxq8.png

如果我删除该行

font-size: 1em;

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

Answer 1

将这些添加到按住按钮的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;
}

Answer 2

我遇到了类似的问题，它适用于除 iPhone 之外的所有浏览器

将这三行添加到类 .myButton 将解决您的问题。我在 iPhone 上测试过。 http://plnkr.co/edit/KACcDGP6yt9cPJvF

   display: flex;
   justify-content: space-around;
   align-items: center;

iPhone（Safari）无法使FontAwesome图标居中

2 个答案: