左侧 LOGO - 菜单链接居中答案

【问题标题】：LOGO on the left - menu links centered左侧 LOGO - 菜单链接居中
【发布时间】：2020-12-26 12:20:28
【问题描述】：

嗨。我正在努力为图片中的导航布局编写代码（上图）。我希望徽标（图片）位于左侧，菜单链接位于中间。用 CSS 怎么写？

这是该部分的 HTML：

    <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>

我可能需要先对 HTML 进行一些更改吗？

提前致谢！

【问题讨论】：

标签： css menu navigation navbar nav

【解决方案1】：

#header {
  display:flex;
  justify-content: center;
}

.img{
  position: absolute;
  left: 0; 
}

#nav-bar{
  align-self:center;
}

   <header id="header">
        <div class="img">
            <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
        </div>
        
        <nav id="nav-bar">
            <ul id="menu">
                <li><a class="nav-link" href="#menu1">menu1</a></li>
                <li><a class="nav-link" href="#menu2">menu2</a></li>
                <li><a class="nav-link" href="#menu3">menu3</a></li>   
            </ul>
        </nav>
    </header>

【讨论】：

【解决方案2】：

我相信您可以根据自己的需要尝试这个布局，然后进一步修改它以满足您的需求。这将为您提供所需的布局。

 <header id="header">
  <div class="container-1">
    <a href="landingpage.html"
      ><img
        src="https://picsum.photos/200"
        alt="image of the logo"
        id="header-img"
        width="175px"
        height="52px"
    /></a>
  </div>
  <div class="container-2">
    <ul id="menu">
      <li class="menu-item">
        <a class="nav-link" href="#menu1">menu1</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu2">menu2</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu3">menu3</a>
      </li>
    </ul>
  </div>
</header>

这是上面html的css

#menu {
     text-decoration: none;
     list-style: none;
     margin: 0;
     padding-inline-start: 0;
    }
 .container-1 {
    display: inline-block;
   }
  .container-2 {
   text-align: center;
   display: inline-block;
   width: calc(100% - 200px);
  }
  .menu-item {
    display: inline-block;
    padding: 1rem;
   }

您可以试试这个并进一步设置组件的样式。

【讨论】：