图标未在圆形标签内垂直居中显示[重复]答案

【问题标题】：Icon is not showing vertically centered inside a circular tag [duplicate]图标未在圆形标签内垂直居中显示[重复]
【发布时间】：2020-03-02 13:57:25
【问题描述】：

我正在尝试创建一个带有标签的圆圈并将图标放在该圆圈内。但是那个图标没怎么掉下来。

【问题讨论】：

标签： html css

【解决方案1】：

图标的位置取决于 a 元素的填充和默认行高。您可以尝试删除填充并将 line-height 设置为等于元素高度。

您还可以使用 CSS flex 将图标居中。

* {
  box-sizing: border-box;
}

body {
  background: black;
}

#no-padding {
  box-sizing: border-box;
  display: inline-block;
  padding: 0;
  line-height: 44px;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  text-align: center;
  transition: all 0.2s;
}

#flex {
  display: inline-flex;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

i {
  color: white;
}

<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>

<body>
  <a id='no-padding'><i class="fab fa-facebook-f"></i></a>
  <a id='flex'><i class="fab fa-facebook-f"></i></a>
</body>

</html>

【讨论】：

它通过删除填充并将行高设置为与高度相同来工作。使用 flex 也可以达到同样的效果。

【解决方案2】：

试试这个 CSS：

* {
  box-sizing: border-box;
}

body {
  background: black;
}

a {
  display: flex;          /* Newly added */
  align-items: center;    /* Newly added */
  border: 1px solid #fff; 
  cursor: pointer;
  border-radius: 50%;
  margin-right: 1rem;
  width: 44px;
  height: 44px;
  text-align: center;
  transition: all 0.2s;
}

i {
   color: white;
}

a i {
  margin: 0 auto; /* Newly added */
}

<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
</head>

<body>
  <a><i class="fab fa-facebook-f"></i></a>
</body>

</html>

【讨论】：

我给你做了一个sn-p。请将其更改为您想要的外观 - 您错过了颜色：白色；
它与 flex 一起工作，我们不能通过传递 line-height 与 height 和 width 相同来做到吗？
哦，因为我明确给出了高度和宽度，所以不需要填充。

【解决方案3】：

将这些样式添加到图标。

display: inline-block;
padding: 0px 15px; /* changed style */
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
line-height: 44px; /* added style */

【讨论】：

【解决方案4】：

你可以通过使用行高试试这个：

a {
   display: inline-block;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
    width: 44px;
  height: 44px;
  line-height: 44px;
  align-items: center;
  text-align: center;
  justify-content: center;
  transition: all 0.2s;
}

【讨论】：

【解决方案5】：

我认为，flexbox 是最简单的解决方案，只需将这些行添加到您的“a”标签：

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

【讨论】：