如何让我的徽标向左移动，而我的导航栏图标在中间？

Question

有人可以帮我解决这个问题吗，所以基本上我希望我的徽标更靠近导航栏的左侧，而我的图标我想用一点填充固定在中间。我该怎么做？

This is it and I want it to look like this (red highlighted parts)

代码如下：

HTML:

<body>
  <header>
    <div align="left">
<a href="/"><img width='200' height='50' src='Icons/logo.png' /></a>
    </div>
    <div class="navbar">
      <a href="#" class="navbar__link">
        <span class="material-icons">whatshot</span>
      </a>
      <a href="#" class="navbar__link">
        <span class="material-icons">search</span>
      </a>
      <a href="#" class="navbar__link">
        <span class="material-icons">person_outline</span>
      </a>
    </div>
  </header>
</body>

CSS:

    .navbar__link {
  position: static;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  margin: 20px 0;
  border-radius: 10px;
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid #ffffff;
  display: flex;
  text-align: center;
  display: inline-block;
  padding: 20px;
}

如果您知道如何解决，请回答，谢谢:D!

请有人解决这个问题。

如果您有修复程序，请编辑代码并直接在该修复程序的底部写入。

[更新] 徽标已修复，但图标仍未移到图像中间 link 应该显示图标是如何修复的，感谢迄今为止帮助过的所有人！

[更新]（已修复）

Answer 1

如果您要并排放置 div，您可以使用浮动而不是对齐，如下所示。

<div style="float: left;">
  <a href="/"><img width='200' height='50' src='Icons/logo.png' /></a>
</div>

如果徽标和导航需要一些填充。

<div style="float: left; padding-right: 10px;">
  <a href="/"><img width='200' height='50' src='Icons/logo.png' /></a>
</div>

编辑：添加此内联样式 justify-content: center;应该修复它。

<div class="navbar" style="justify-content: center;">
  <a href="#" class="navbar__link">
    <span class="material-icons">whatshot</span>
  </a>
  <a href="#" class="navbar__link">
    <span class="material-icons">search</span>
  </a>
  <a href="#" class="navbar__link">
    <span class="material-icons">person_outline</span>
  </a>
</div>

P.S. 由于链接样式表的顺序，您的 .navbar css 未被读取。 bootstrap css 将覆盖您自定义的 .navbar css。

Answer 2

您可以尝试使用 flex:

Html

<body>
  <header>
    <div class="logo">
      <a href="/"><img width='200' height='50' src='Icons/logo.png' /></a>
    </div>
    
    /* Added class to div*/
    <div class="navbar">
      <a href="#" class="navbar__link">
        <span class="material-icons">whatshot</span>
      </a>
      <a href="#" class="navbar__link">
        <span class="material-icons">search</span>
      </a>
      <a href="#" class="navbar__link">
        <span class="material-icons">person_outline</span>
      </a>
    </div>
  </header>
</body

Css

// you don't need to add class to a tag, it can be selected by following way
.navbar > a {
  text-decoration: none;
  padding: 15px;
}

header {
  display: flex;
  // make the header take all space of body
  width: 100%;
}

.navbar {
  display: flex;

  // make navbar take all space that remains after the logo
  flex: 1;
  justify-content: center;

  // make the navbar move left side else it will not be in complete middlle
  transform: translate(-100px);
}

如何让我的徽标向左移动，而我的导航栏图标在中间？

How do I make my logo go towards the left and my nav bar icons in the middle?

html

javascript

css

nav

navbar