时间戳

首页 > 解决方案 > 我想在弹性项目中完美地居中字体图标

css - 我想在弹性项目中完美地居中字体图标

问题描述

我有一个弹性容器，里面有六个弹性项目。我正在尝试将包含字体图标的锚标签（弹性项目的子元素）完美地居中于弹性项目。所以我决定将弹性项目的显示属性值设置为弹性。所以基本上现在我有一个弹性容器里面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>

标签： cssflexboxiconsfont-awesomevertical-alignment

解决方案

这将不起作用，因为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>

推荐阅读