【问题标题】：I want to perfectly center font icons inside flex items我想在弹性项目中完美地居中字体图标
【发布时间】：2020-09-02 11:31:52
【问题描述】：
我有一个弹性容器，里面有六个弹性项目。我正在尝试将包含字体图标的锚标签（弹性项目的子元素）完美地居中于弹性项目。所以我决定将弹性项目的显示属性值设置为弹性。所以基本上现在我有一个弹性容器flex 容器。然后我将内部 flex 容器的 align-items 属性和 justify-content 属性设置为居中。
图标似乎水平居中于弹性项目，但不是垂直居中。我也想让它垂直居中。
*{
margin: 0;
padding: 0;
}
body{
/* css variables declaration*/
--sqrt-of-three:1.732;
--width-of-navbar:75%;
--number-of-navbarelements:5;
}
.navtab{
width: 100%;
}
.navbar{
margin-left: auto;
margin-right: auto;
width: var(--width-of-navbar);
background-color: green;
display: flex;
align-items: flex-start;
justify-content: center;
}
.navhexagon{
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(var(--width-of-navbar) / var(--number-of-navbarelements));
padding-bottom: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 2));/*The math used here helps to maintain the ratio of 2 : square root of 3*/
background-color: blue;
/* clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); */
display: flex;
align-items: center;
justify-content: center;
}
.navbar .navhexagon + .navhexagon /*In order to select every navhexagon element except the first one*/
{
margin-left: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) / -4);
}
.navhexagon:nth-child(even)
{ margin-top:calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 4));
background-color: pink;
}
a{
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://kit.fontawesome.com/f9cdb26252.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<body>
<nav class="navbar">
<div class="navhexagon" id="navelement1">
<a href="trial3.html">
<i class="fas fa-home"></i>
</a>
</div>
<div class="navhexagon" id="navelement2">
<a href="trial3.html">
<i class="fas fa-ghost"></i>
</a>
</div>
<div class="navhexagon" id="navelement3">
<a href="trial3.html">
<i class="fas fa-laptop-code"></i>
</a>
</div>
<div class="navhexagon" id="navelement4">
<a href="trial3.html">
<i class="fas fa-music"></i>
</a>
</div>
<div class="navhexagon" id="navelement5">
<a href="trial3.html">
<i class="fas fa-project-diagram"></i>
</a>
</div>
<div class="navhexagon" id="navelement5">
<a href="trial3.html">
<i class="fas fa-shopping-cart"></i>
</a>
</div>
</nav>
</body>
</html>
【问题讨论】：
标签：
css
flexbox
icons
font-awesome
vertical-alignment
【解决方案1】：
这不起作用，因为 padding-bottom 用于设置 .navhexagon 的高度，但您可以绝对定位其内容（您可能需要更改数学以达到相同的高度）。
*{
margin: 0;
padding: 0;
}
body{
/* css variables declaration*/
--sqrt-of-three:1.732;
--width-of-navbar:75%;
--number-of-navbarelements:5;
}
.navtab{
width: 100%;
}
.navbar{
margin-left: auto;
margin-right: auto;
width: var(--width-of-navbar);
background-color: green;
display: flex;
align-items: flex-start;
justify-content: center;
}
.navhexagon{
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(var(--width-of-navbar) / var(--number-of-navbarelements));
padding-bottom: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 2));/*The math used here helps to maintain the ratio of 2 : square root of 3*/
background-color: blue;
/* clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); */
position: relative;
}
.navhexagon a {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.navbar .navhexagon + .navhexagon /*In order to select every navhexagon element except the first one*/
{
margin-left: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) / -4);
}
.navhexagon:nth-child(even)
{ margin-top:calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 4));
background-color: pink;
}
a{
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://kit.fontawesome.com/f9cdb26252.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<body>
<nav class="navbar">
<div class="navhexagon" id="navelement1">
<a href="trial3.html">
<i class="fas fa-home"></i>
</a>
</div>
<div class="navhexagon" id="navelement2">
<a href="trial3.html">
<i class="fas fa-ghost"></i>
</a>
</div>
<div class="navhexagon" id="navelement3">
<a href="trial3.html">
<i class="fas fa-laptop-code"></i>
</a>
</div>
<div class="navhexagon" id="navelement4">
<a href="trial3.html">
<i class="fas fa-music"></i>
</a>
</div>
<div class="navhexagon" id="navelement5">
<a href="trial3.html">
<i class="fas fa-project-diagram"></i>
</a>
</div>
<div class="navhexagon" id="navelement5">
<a href="trial3.html">
<i class="fas fa-shopping-cart"></i>
</a>
</div>
</nav>
</body>
</html>
【解决方案2】：
这是因为在.navhexagon 上设置了padding-bottom。您可以将其替换为顶部和底部的填充或高度。然后图标将居中。
【解决方案3】：
您正在使用填充来设置高度，这会使 flex 对齐属性无用。
为什么不使用padding-top，而不是只使用padding-bottom；
这个：
padding-bottom: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 2));
变成：
padding-bottom: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 4));
padding-top: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 4));
分母增加了 2。
* {
margin: 0;
padding: 0;
}
body {
/* css variables declaration*/
--sqrt-of-three: 1.732;
--width-of-navbar: 75%;
--number-of-navbarelements: 5;
}
.navtab {
width: 100%;
}
.navbar {
margin-left: auto;
margin-right: auto;
width: var(--width-of-navbar);
background-color: green;
display: flex;
align-items: flex-start;
justify-content: center;
}
.navhexagon {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(var(--width-of-navbar) / var(--number-of-navbarelements));
padding-bottom: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 4));
padding-top: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 4));
background-color: blue;
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
display: flex;
align-items: center;
justify-content: center;
}
.navbar .navhexagon+.navhexagon
/*In order to select every navhexagon element except the first one*/
{
margin-left: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) / -4);
}
.navhexagon:nth-child(even) {
margin-top: calc((var(--width-of-navbar) / var(--number-of-navbarelements)) * (var(--sqrt-of-three) / 4));
background-color: pink;
}
a {
color: #ffffff;
}
<script src="https://kit.fontawesome.com/f9cdb26252.js" crossorigin="anonymous"></script>
<nav class="navbar">
<div class="navhexagon" id="navelement1">
<a href="trial3.html">
<i class="fas fa-home"></i>
</a>
</div>
<div class="navhexagon" id="navelement2">
<a href="trial3.html">
<i class="fas fa-ghost"></i>
</a>
</div>
<div class="navhexagon" id="navelement3">
<a href="trial3.html">
<i class="fas fa-laptop-code"></i>
</a>
</div>
<div class="navhexagon" id="navelement4">
<a href="trial3.html">
<i class="fas fa-music"></i>
</a>
</div>
<div class="navhexagon" id="navelement5">
<a href="trial3.html">
<i class="fas fa-project-diagram"></i>
</a>
</div>
<div class="navhexagon" id="navelement5">
<a href="trial3.html">
<i class="fas fa-shopping-cart"></i>
</a>
</div>
</nav>