水平居中引导图标答案

【问题标题】：Centering Bootstrap Icons Horizontally水平居中引导图标
【发布时间】：2021-10-25 21:57:54
【问题描述】：

我无法在按钮中将引导图标居中。如您所见，该图标未水平居中。我无法让它工作（我尝试过 text-align、flexbox 和 justify-content，......），因为显然“字母”本身在右边占用了一些额外的空间 - 至少它是这样的在我看来。有人可以帮帮我吗？

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    padding: 4px;
    font-size: 24px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
</head>
<body>
    <button>
        <i class="bi-play"></i>
    </button>
</body>

【问题讨论】：

因为不同的图标和字符有不同的大小，我认为不可能每次都居中并正确；相反，您可以在左侧或右侧添加padding 以更正大小。

标签： html css bootstrap-4 icons

【解决方案1】：

这与文本没有任何关系，因为您要居中的是 i 元素。因此，它是需要显示为 flex 并设置居中的按钮。

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
</head>
<body>
    <button>
        <i class="bi-play"></i>
    </button>
</body>

【讨论】：

抱歉，请看一下按钮。播放图标稍偏左。就像我在问题中所说的那样，我已经尝试过 flex-box，即使我没有将它包含在示例代码中。
嗨，我已经测量，放大图像并再次测量，从按钮边框移除曲线并再次测量，给图标背景颜色并再次测量，只是找不到图标是在左边。您使用的是什么浏览器/操作系统？
目前是windows和opera gx。我又看了看那东西，也测量了一下，它似乎在中间。但是，我终其一生都无法看到这一点。对我来说，它看起来有点偏左，而右侧有更多的空间。我还使用了不同的图标，如果它们是对称的（例如加号），我没有问题。所以我想这实际上只是我，而不是浏览器......
我认为这可能是一种视觉错觉 - 因为那个特定的图标在左侧很胖，而在右侧逐渐变得不存在 - 我必须进行物理测量才能制作当然。

【解决方案2】：

*{
padding:0;
margin:0;
}
button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 60px;
    font-size: 30px;
    border-radius: 5px;
    background-color: red;
}
.bi-play{
color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
</head>
<body>
    <button>
        <i class="bi-play my4"></i>
    </button>
</body>

现在检查它是否能解决您的问题。我认为它现在居中。

【讨论】：

您还可以在 CSS 中使用按钮内部的填充来将图标移过主轴并将其留在您认为居中的位置。