如何使用Flexbox将徽标居中？

Question

我需要将徽标居中放置在容器的中间，而不是在开始div和结束div之间的中间。使用flexbox有什么方法吗？

以下是徽标的快照，该徽标位于两个div之间的中间：

我的代码：

/* =======Header Start======= */
.bar-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 15px;
  border-bottom: 2px solid #3e3e3e !important;
}

/* =======Social Icons======= */
.social-icons-list {
  padding-left: 0;
  list-style: none;
}
.social-icons-list li {
  display: inline-block;
  margin-right: 13px;
}
.social-icons-list .fab {
  width: 30px;
  height: 30px;
  line-height: 25px;
  border: 2px solid #3e3e3e;
  text-align: center;
  color: #3e3e3e;
  border-radius: 50%;
}

/* =======Social Icons End======= */
.search-btn a{
  color: #3e3e3e;
}
.search-btn .fas{
  font-size: 26px;
}
.logo img{
  align-self: center;
}

<div class="container">
  <div class="bar-wrapper">
    <div class="social-icons">
      <ul class="social-icons-list"> 
        <li> <a href="#"><i class="fab fa-facebook-f"></i></a></li> 
        <li> <a href="#"><i class="fab fa-twitter"></i></a></li> 
        <li> <a href="#"><i class="fab fa-google-plus-g"></i></a></li> 
        <li> <a href="#"><i class="fab fa-youtube"></i></a></li>
        <li> <a href="#"><i class="fab fa-instagram"></i></a></li>
      </ul>
    </div>
    <div class="logo">
      <img src="imgs/Logo.png" alt="logo">
    </div>
    <div class="search-btn">
      <a href="#"><i class="fas fa-search"></i></a>
    </div>
  </div>
</div>

Answer 1

首先，您应该删除.logo img上的属性align-self: center;。通过添加justify-content: space-between;在flexbox的元素之间定义空格，在这种情况下，对齐是没有意义的。

此属性包括其值justify-content: space-between;自动计算项目之间的间隔，实际上，这些间隔必须成比例。但是，flexbox中元素的宽度不同，这使得它们之间的间隔也不同。尝试添加到flexbox min-width-property中的每个项目中，它应该可以解决您的问题。