如何在图像顶部显示菜单，标题在图像中间？

Question

我们将在 <div> 元素和另外两个元素上有一个背景图像：菜单和标题。我们在对齐横幅图片顶部的菜单和中间的标题时遇到问题。

这里还有 jsfiddle

如何让菜单在顶部，标题在图片中间？

当前问题：

预期结果：

这是我们尝试过的方法，但无法使其在所有断点处对齐。 (min-width: 320px 和 min-width: 1440px)

.wrapper {
  position: relative;
  display: block;
}

.banner__img {
      width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
    z-index: 1;
    min-height: 300px;
}

.content__wrapper {
  position: relative;
  z-index: 2;
  padding: 16px;
}

.menu-bar__list:hover > ul {
  display: block;
}
.menu-bar__list {
  position: relative;
  margin-right: 16px;
}

.menu-bar__list__second {
  display: none;
  position: absolute;
}

.menu-bar {
  display: flex;
  flex-direction: row;
}
ul {
  list-style: none;
}

.content__title {
  text-align: center;
}
.logo > img {
  max-width: 50px;
}

.content__menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="wrapper">
  <div class="banner__img" style="background-image: url('http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg')"></div>
  <div class="content__wrapper">
    <div class="content__menu">
      <div class="logo">
        <img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
      </div>
      <nav>
        <ul class="menu-bar">
          <li class="menu-bar__list"><a href="#">Home</a></li>
          <li class="menu-bar__list">
            <a href="#">Products</a>
            <ul class="menu-bar__list__second">
              <li ><a href="#">Products Sub Menu 1</a></li>
              <li><a href="#">Products Sub Menu 2</a></li>
              <li><a href="#">Products Sub Menu 3</a></li>
              <li><a href="#">Products Sub Menu 4</a></li>
            </ul>
          </li>
          <li class="menu-bar__list">
            <a href="#">Services</a>
            <ul class="menu-bar__list__second">
              <li><a href="#">Services Sub Menu 1</a></li>
              <li><a href="#">Services Sub Menu 2</a></li>
              <li><a href="#">Services Sub Menu 3</a></li>
              <li><a href="#">Services Sub Menu 4</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content__title">
      <h1>Some title here</h1>
    </div>
  </div>
</div>

Answer 1

对菜单使用 <nav>，并使用 align 属性使标题居中。

Answer 2

我稍微简化了你的代码（可能还不够），但你可以理解这个想法（请检查How to create a Minimal, Reproducible Example）：

.banner {
  position: relative;
  overflow: hidden;
}

.background {
  object-fit: cover;
  width: 100%;
}

.logo {
  float: right;
}

.logo > img {
  max-width: 50px;
}

.content {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.content__menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.content__title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.menu-bar__list:hover > ul {
  display: block;
}

.menu-bar__list {
  position: relative;
  margin-right: 16px;
}

.menu-bar {
  display: flex;
  flex-direction: row;
}

ul {
  list-style: none;
}

<div class="banner">
  
  <img class="background" src="http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg" alt="">
  
  <div class="content">
    
    <div class="content__menu">
      <div class="logo">
      <img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
    </div>

    <nav class="menu">
      <ul class="menu-bar">
        <li class="menu-bar__list">
          <a href="#">Home</a>
        </li>

        <li class="menu-bar__list">
          <a href="#">Products</a>
        </li>

        <li class="menu-bar__list">
          <a href="#">Services</a>
        </li>
      </ul>
    </nav>
    </div>
    
    <div class="content__title">
      <h1>Some title here</h1>
    </div>
  </div>
  
</div>

EDIT: codepen link, 因为这里的预览没有显示（我猜是与绝对定位有关）： https://codepen.io/herzinger/full/xxxOamN

Answer 3

您可以将文字放在图片的 div

中

<div class="banner__img" style="background-image: url('http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg')">
  <div class="content__title">
    <h1>Some title here</h1>
  </div>
</div>

然后将以下样式应用于 css 中的 .banner__img：

  display: flex;
  align-items: center;
  justify-content: center;

即使您调整 window 的大小，文本现在仍居中。 Flexbox 允许您垂直和水平对齐元素。

Answer 4

能否请您检查以下代码，希望它能解决您的问题。

演示：https://jsfiddle.net/yudizsolutions/f81oymxs/14

.wrapper { 
    min-height: 300px; 
    display: flex; 
    display: -webkit-flex; 
    align-items:  center; 
    justify-content: center; 
    position: relative;
}
header {  
    padding: 15px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    box-sizing: border-box;
}
nav { 
    display: flex; 
    display: -webkit-flex; 
    justify-content: space-between;
}
.menu-bar__list:hover > ul {
  display: block;
}
.menu-bar__list {
  position: relative;
  margin-right: 16px;
}

.menu-bar__list__second {
  display: none;
  position: absolute;
}

.menu-bar {
  display: flex;
  flex-direction: row;
}
ul {
  list-style: none;
}

.content__title {
  text-align: center;
}
.logo img {
  max-width: 50px;
}

<div class="wrapper" style="background: url('https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg') no-repeat top center / cover;">
    <header>
        <nav>
            <div class="logo">
                <a href="#"><img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg"></a>
            </div>
            <ul class="menu-bar">
            <li class="menu-bar__list"><a href="#">Home</a></li>
            <li class="menu-bar__list">
                <a href="#">Products</a>
                <ul class="menu-bar__list__second">
                <li ><a href="#">Products Sub Menu 1</a></li>
                <li><a href="#">Products Sub Menu 2</a></li>
                <li><a href="#">Products Sub Menu 3</a></li>
                <li><a href="#">Products Sub Menu 4</a></li>
                </ul>
            </li>
            <li class="menu-bar__list">
                <a href="#">Services</a>
                <ul class="menu-bar__list__second">
                <li><a href="#">Services Sub Menu 1</a></li>
                <li><a href="#">Services Sub Menu 2</a></li>
                <li><a href="#">Services Sub Menu 3</a></li>
                <li><a href="#">Services Sub Menu 4</a></li>
                </ul>
            </li>
            </ul>
        </nav>
    </header>
    <div class="content__wrapper">
        <h1>Some title here</h1>
    </div>
  </div>

如何在图像顶部显示菜单，标题在图像中间？

How to display menu at the top of image with title in the middle of image?

html

css

menu

flexbox