Question

我是新手，我尝试用HTML，CSS和PHP创建一个网站。我试图使其适应性强，所以我使用flexbox，正在制作导航栏，但遇到一个问题：我的导航栏像这样||按钮|按钮| LOGO |按钮|按钮|分开。而且我可能很愚蠢，因为我不知道如何覆盖容器的justify-content: center;以使徽标水平居中。谢谢您的提前帮助：）

body {
  background-color: #262626;
  margin: 0;
}

.header_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 2vh 0 2vh 0;
  background-color: red;
}

.logo {
  height: 7vh;
  -webkit-filter: drop-shadow(2px 2px 4px #000000);
  align-self: center;
}

.header_sub_middle_container {
  display: flex;
  flex-direction: column;
}

.header_sub_container {
  display: flex;
  flex-direction: row;
}

.header_button_text {
  color: white;
  font-size: 2vh;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 4px #000000;
  padding: 0 2vh 0 2vh;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet"> 

<div class="header_container">
  <div class="header_sub_right_container header_sub_container">
    <div class="header_right_button_container_1 header_button">
      <p class="header_button_text">ACCUEIL</p>
    </div>
    <div class="header_right_button_container_2 header_button">
      <p class="header_button_text">NOTRE GAMME</p>
    </div>          
  </div>
  <div class="header_sub_middle_container">
    <img class="logo" src="ressources/images/3MTQzk0.png">
  </div>
  <div class="header_sub_left_container header_sub_container">
    <div class="header_left_button_container_1 header_button">
      <p class="header_button_text">DEVIS</p>
    </div>
    <div class="header_left_button_container_2 header_button">
      <p class="header_button_text">CONTACT</p>
    </div>          
  </div>
</div>

如何居中特定的弹性项目

0 个答案: