左侧的 LOGO - 菜单链接居中

Question

Representation of Navigation layout

你好。我正在为图片（上图）中的导航布局编写代码而苦苦挣扎。我希望徽标（图片）位于左侧，菜单链接位于中间。 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 进行一些更改吗？

提前致谢！

Answer 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>

Answer 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;
   }

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

左侧的 LOGO - 菜单链接居中

LOGO on the left - menu links centered

css

menu

navigation

navbar

nav