时间戳

首页 > 解决方案 > CSS fontAwesome 图标不居中

html - CSS fontAwesome 图标不居中

问题描述

我知道最初的问题被回答了好几次。通常我知道该怎么做，所以它更多的是一个错误修复问题而不是一般问题。该代码显示了一个作为切换的十字。如果单击另一个 3 个元素，中间的那个让我头疼。我使用了一个 fontAwesome 图标，但无法弄清楚为什么它不会在这个 div 元素中居中。

我召唤了一个可以解决我的错误的 CSS 大师。;)

  <!-- fontawesome stylesheet https://fontawesome.com/ -->
  <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>


<style>
html {
    margin: auto;
    width: 50%;
}
.modal-setting-toggle {
    position: relative;
    margin-top: 10px;
    width:40px;
    height: 40px;
    border-radius: 10px;
    background: #ecf0f3;
    cursor: pointer;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
  }

  .modal-setting-toggle::before, .modal-setting-toggle::after {
    content: "";
    background: #c3c2c7;
    border-radius: 5px;
    width: 20px;
    height: 5px;
    position: absolute;
    left: 10px;
    top: 18px;
    transition: 0.2s ease;
    z-index: 1;
  }
  .modal-setting-toggle::before {
    transform: rotate(0deg);
  }
  
  .modal-setting-toggle::after {
    transform: rotate(-90deg);
  }

  .modal-setting-toggle:hover::before {
    transform: rotate(0deg);
    background-color: #3498db;
  }

  .modal-setting-toggle:hover::after {
    transform: rotate(-90deg);
    background-color: #3498db;
  }
  
  .modal-setting-toggle.open::before {
    transform: rotate(45deg);
    background-color: #3498db;
  }
  .modal-setting-toggle.open::after {
    transform: rotate(-45deg);
    background-color: #3498db;
  }
  .modal-setting-toggle.open .modal-setting-button {
    opacity: 1;
    pointer-events: auto;
  }
  .modal-setting-toggle.open .modal-setting-button:first-of-type {
    bottom: -50px;
    background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
  }
  .modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
    bottom: -100px;
    background: #ecf0f3;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition-delay: 0.05s;
  }
  .modal-setting-toggle.open .modal-setting-button:last-of-type {
    bottom: -150px;
    background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
    transition-delay: 0.1s;
  }
  
  .modal-setting-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    background: #ecf0f3;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    box-shadow: inherit;
    transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
  }
  .modal-setting-button:hover {
    transform: scale(1.1);
  }

</style>

<section id="modal-setting" class="modal box-shadow">
        <div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
            <div class="modal-setting-button"></div>
            <div class="modal-setting-button"><i class="fas fa-link"></i></div>
            <div class="modal-setting-button"></div>
        </div>
</section>

标签： htmlcss

解决方案

添加display: flex到.modal-setting-toggle.open .modal-setting-button:nth-of-type(2)以使用该align-items: center属性。

html {
  margin: auto;
  width: 50%;
}

.modal-setting-toggle {
  position: relative;
  margin-top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ecf0f3;
  cursor: pointer;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}

.modal-setting-toggle::before,
.modal-setting-toggle::after {
  content: "";
  background: #c3c2c7;
  border-radius: 5px;
  width: 20px;
  height: 5px;
  position: absolute;
  left: 10px;
  top: 18px;
  transition: 0.2s ease;
  z-index: 1;
}

.modal-setting-toggle::before {
  transform: rotate(0deg);
}

.modal-setting-toggle::after {
  transform: rotate(-90deg);
}

.modal-setting-toggle:hover::before {
  transform: rotate(0deg);
  background-color: #3498db;
}

.modal-setting-toggle:hover::after {
  transform: rotate(-90deg);
  background-color: #3498db;
}

.modal-setting-toggle.open::before {
  transform: rotate(45deg);
  background-color: #3498db;
}

.modal-setting-toggle.open::after {
  transform: rotate(-45deg);
  background-color: #3498db;
}

.modal-setting-toggle.open .modal-setting-button {
  opacity: 1;
  pointer-events: auto;
}

.modal-setting-toggle.open .modal-setting-button:first-of-type {
  bottom: -50px;
  background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}

.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
  bottom: -100px;
  background: #ecf0f3;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition-delay: 0.05s;
  display: flex; /* ADD THIS */
}

.modal-setting-toggle.open .modal-setting-button:last-of-type {
  bottom: -150px;
  background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
  transition-delay: 0.1s;
}

.modal-setting-button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  background: #ecf0f3;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  box-shadow: inherit;
  transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}

.modal-setting-button:hover {
  transform: scale(1.1);
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>


<section id="modal-setting" class="modal box-shadow">
  <div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
    <div class="modal-setting-button"></div>
    <div class="modal-setting-button"><i class="fas fa-link"></i></div>
    <div class="modal-setting-button"></div>
  </div>
</section>

推荐阅读