我想在Flex项目中完美地将字体图标居中。

问题描述 投票：0回答：2

我有一个flex容器，里面有六个flex项目。我试图将包含字体-图标的锚标签(flex项的子元素)与flex项完全居中，所以我决定将flex项的显示属性值设置为flex.所以基本上现在我在flex容器内有一个flex容器，然后我将flex容器内部的align-items属性和justify-content属性设置为居中，图标似乎与flex项水平居中，但不是垂直居中，我想让它也垂直居中。

*{
  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
2个回答
0
投票

这将无法工作，因为 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>
0
投票

这是因为 padding-bottom 定位于 .navhexagon. 你可以用顶部和底部的padding或者高度来代替。这样图标就会居中了。

0
投票

你使用padding来设置高度，这使得flex对齐属性失去了作用。

与其只使用 padding-bottom 何不平分秋色 padding-top;

这。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.