Question

下面是我的代码，它是一个导航栏，我想要做的就是在导航栏中垂直居中我的内联列表项。

<header class="header_wrapper">
  <div class="logo_container">
    <img src="./logo.png" alt="">
  </div>
  <div class="nav_container">
    <div class="helper">
      <div class="content">
        <ul class="nav_menu">
          <li>Home</li>
          <li>News</li>
          <li>Events</li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="search_container">

  </div>
</header>

这是我的css

.header_wrapper{
  background:#d8d0d01a;
  display: flex;
}
.logo_container{
  width:20%;
}
.nav_container{
width:50%:
}

.search_container{
width:30%;
}

对此有何看法？感谢

Answer 1

您可以尝试使用flexbox的align-items属性：

.nav_menu
{
    display: flex;
    align-items: center;
}

请注意，只有当.nav_menu具有flex-direction: row;时，这才会正常运行，这是默认设置。

此外，这与您的问题无关，但通常情况下，CSS中的类使用连字符而不是下划线（nav-menu而不是nav_menu）。

Answer 2

将以下css添加到类.nav_menu

中

.nav_menu{
 display: flex;
 justify-content:space-around;
 align-items:center;
}

＆＃13;

.header_wrapper{
  background:#d8d0d01a;
 
}
.logo_container{
  width:20%;
}
.nav_container{
width:50%:
}

.search_container{
width:30%;
}

.nav_menu{
 display: flex;
 justify-content:space-around;
 align-items:center;
}

＆＃13;

<header class="header_wrapper">
      <div class="logo_container">
          <img src="./logo.png" alt="">
      </div>
      <div class="nav_container">
        <div class="helper">
          <div class="content">
            <ul class="nav_menu">
              <li>Home</li>
              <li>News</li>
              <li>Events</li>
              <li>Blog</li>
              <li>Contact</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="search_container">

      </div>
    </header>

＆＃13;

Answer 3

它已经垂直对齐，没有？

＆＃13;

.header_wrapper {
  background: #d8d0d01a;
  display: flex;
}

.logo_container {
  width: 20%;
}

.nav_container {
  width: 50%;
  border: 1px solid blue; /* Added for test */
}

.search_container {
  width: 30%;
}

.nav_menu{
  border: 1px solid red; /* Added for test */
}

.nav_menu li{
  display: inline; /* Added */
  border: 1px solid green; /* Added for test */
}

＆＃13;

<header class="header_wrapper">
  <div class="logo_container">
    <img src="./logo.png" alt="">
  </div>
  <div class="nav_container">
    <div class="helper">
      <div class="content">
        <ul class="nav_menu">
          <li>Home</li>
          <li>News</li>
          <li>Events</li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="search_container">
  </div>
</header>

＆＃13;

我只添加了li s的内联。

如何垂直居中div中的无序列表？

3 个答案: