显示 flex - 相对于我的中心元素居中 [重复]答案

【问题标题】：display flex - centered in relation to my central element [duplicate]显示 flex - 相对于我的中心元素居中 [重复]
【发布时间】：2020-03-17 17:38:48
【问题描述】：

我的问题很难解释，但我会尝试。我开发了一个网站。对于我的导航栏，我在标题中有 3 个 div（汉堡菜单/徽标/社交网络）。我使用 flex 来显示 justify-content: between。我的问题是我想将我的第二个 div 放在视口而不是其他两个 div 的中心。有人知道怎么做吗？

（请原谅我的英语不好）

<header>
        <div class="burger">
            <img src="assets/img/cutlery.svg" alt="icône couteau cuillère burger menu">
        </div>
        <div class="logo">
            <img src="assets/img/bio.svg" alt="">
        </div>
        <div class="network">
            <a href="#">
                <img src="assets/img/facebook.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/linkedin.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/instagram.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/france.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/english.svg" alt="">
            </a>
        </div>
    </header>

【问题讨论】：

你能用一些图片解释更多吗？

标签： html css

【解决方案1】：

你可以添加

  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;

到你的第二个 div。看这里：

header{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.logo{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
}

<header>
    <div class="burger">
        Burger
    </div>
    <div class="logo">
        Logo
    </div>
    <div class="network">
        <a href="#">
            Fb
        </a>
        <a href="#">
            Ln
        </a>
        <a href="#">
            I
        </a>
        <a href="#">
            Fr
        </a>
        <a href="#">
            En
        </a>
    </div>
</header>

【讨论】：

您能否详细说明为什么这对未来的读者有用？ +1

【解决方案2】：

刚刚测试了下面的代码，它可以工作。这是给出一个想法； CSS 属性当然必须在单独的文件中：

<div style="display:flex;flex-direction:row;width:100%">
    <div style="flex:1 1 0px">
        <span style="float:right;background-color:lime">Left Element</span>
    </div>
    <div style="background-color:blue">Central element</div>
    <div style="flex:1 1 0px">
        <span style="background-color:red">Right 1</span>
        <span style="background-color:gray">Right 2</span>
        <span style="background-color:magenta">Right 3</span>
    </div>
</div>

【讨论】：

【解决方案3】：

或者你也可以这样。

header{
  display: flex;
 width: 100%;
 justify-content: space-between;
}
.right-menu{
display: flex;
flex: 0 0 55%;
  justify-content: space-between;
}
.right-menu ul{
list-style:none;
margin:0;
}
.right-menu ul li{
display:inline-block;
}

<header>
    <div class="burger">
        Burger
    </div>
    
    <div class="right-menu">
    <div class="logo">
        Logo
    </div>
    <ul>
    <li>
      <a href="#">
            Fb
        </a>
       </li>
    <li>
        <a href="#">
            Ln
        </a>
       </li>
    <li>
        <a href="#">
            I
        </a>
       </li>
    <li>
        <a href="#">
            Fr
        </a>
       </li>
    <li>
        <a href="#">
            En
        </a>
       </li>
    </ul>
      
    </div>
</header>

【讨论】：

【解决方案4】：

给 flexbox 的所有子元素一个 flex: 1 以赋予它们相同的宽度，然后给你的 .logo div 一个 text-align: center。

header {
  display: flex;
  width: 960px;
  background: lightblue;
}

header>* {
  flex: 1;
}

header .logo {
  text-align: center;
}

header .network {
  text-align: right;
}

<header>
  <div class="burger">
    <img src="http://placekitten.com/40/40" alt="icône couteau cuillère burger menu">
  </div>
  <div class="logo">
    <img src="http://placekitten.com/200/100" alt="">
  </div>
  <div class="network">
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
  </div>
</header>

【讨论】：

【解决方案5】：

这个答案很有帮助。

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
}

header > div {
  display: inline-flex;
  flex-basis: 33.33%;
  align-items: center;
}

.burger {
  justify-content: flex-start;
  background-color: #AAAAAA;
}

.logo {
  justify-content: center;
  background-color: #DDDDDD;
}

.network {
  justify-content: flex-end;
  background-color: #AAAAAA;
}

<header>
    <div class="burger">
        <span>01</span>
        <img src="assets/img/cutlery.svg" alt="">
    </div>
    <div class="logo">
        <span>02</span>
        <img src="assets/img/bio.svg" alt="">
    </div>
    <div class="network">
        <a href="#">
            <span>03</span>
            <img src="assets/img/facebook.svg" alt="">
        </a>
        <a href="#">
            <span>04</span>
            <img src="assets/img/linkedin.svg" alt="">
        </a>
        <a href="#">
            <span>05</span>
            <img src="assets/img/instagram.svg" alt="">
        </a>
        <a href="#">
            <span>06</span>
            <img src="assets/img/france.svg" alt="">
        </a>
        <a href="#">
            <span>07</span>
            <img src="assets/img/english.svg" alt="">
        </a>
    </div>
</header>

【讨论】：