Question

我正在尝试将按钮内的图标居中，以使其在每种浏览器中居中。我有以下html：

<button class="bordered">   
    <i class="icon theme-settings-i"></i>
</button>

样式具有以下CSS：

button {
            width: 40px;
            height: 40px;
            outline-color: transparent;
            border-color: grey;
            position: relative;
            border-radius: 0.2em;
            text-align: center;

            .icon {
                font-size: 16px;
                position: relative;
                color: black;
                top: 0.1em;
                display: inline-block;
            }
}

它以台式机chrome（FF）和移动chrome（Opera）为中心。我想以某种方式将其水平放置在iPhone的野生动物园中。无论我尝试什么，它要么向右走，要么向左走。

Answer 1

尝试不添加换行符并查看结果：例如。 <button class="bordered"><i class="icon theme-settings-i"></i></button>

Answer 2

我将使用this trick将其水平和垂直居中。（页面上的最后一个示例）

button {
    width: 40px;
    height: 40px;
    outline-color: transparent;
    border-color: grey;
    position: relative;
    border-radius: 0.2em;
    text-align: center;
      }
        
.icon {
    font-size: 16px;
    position: absolute;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
      }

<button>   
    <i class="icon">a</i>
</button>

按钮内的图标未在iPhone中居中

2 个答案: