试图将徽标置于整页背景图像的中心，但导航栏将其向下推

Question

我有点新手，所以这可能是相当简单的事情。我正在尝试将徽标放置在完整背景图片着陆页的中央。但是我的导航栏一直将徽标向下推。

我相信这是因为这两个元素都在同一个容器中。但是，我尝试将导航移出容器，但它随后将我的背景图像向下推。我试过玩弄 position，但这会弄乱我的徽标和导航图标的 flex 属性。

任何 advice/tips 和简短的解释都会很有帮助，谢谢。

下面是我的代码

也是代码笔：https://codepen.io/LeccaUK/pen/GRodYMO

* {
  margin: 0;
  padding: 0;
}

.icon {
  width: 50px;
}

.logo {
  width: 250px;
}

.hero-container {
  background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
  background-position: center center;
  background-size: cover;
  height: 100vh;
}

nav {
  padding: 30px;
  display: flex;
  justify-content: space-between;
}

.hero-content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="hero-container">
  <nav>
    <img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon">
    <img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon">
  </nav>
  <div class="hero-content">
    <img src="https://image.flaticon.com/icons/svg/3121/3121628.svg" class="logo">
  </div>
</div>

Answer 1

只需插入两个带有 css 背景图像的 div。就是这样。

      * {
         margin: 0;
         padding: 0;
      }
      .icon {
         width: 50px;
      }
      .logo {
         width: 250px;
      }
      .hero-container {
         background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
         background-size: cover;
         background-position: center center;
         height: 100vh;
      }
      nav {
         padding: 30px;
         display: flex;
         justify-content: space-between;
      }
      .hero-content {
         background-image: url(https://image.flaticon.com/icons/svg/3121/3121628.svg);
         height: 100vh;
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 250px;
      }

   <div class="hero-container">
      <div class="hero-content">
         <nav>
            <img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon">
            <img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon">
         </nav>
      </div>
   </div>

试图将徽标置于整页背景图像的中心，但导航栏将其向下推

Trying to center a logo in a full page background image but nav bar is pushing it down

css

nav

centering

flexbox