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

Question

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

这里也是jsfiddle

我们如何将顶部的菜单和图像中间的标题对齐？

目前的问题：

预期结果：

这是我们尝试过的，但无法让它在所有断点中对齐。 （ min-width: 320px宽度：320 像素和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

我稍微简化了您的代码（可能还不够），但您可以理解（请查看如何创建最小的、可重现的示例）：

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

编辑：codepen链接，因为这里的预览没有显示（我猜与绝对定位有关）： https://codepen.io/herzinger/full/xxxOamN

Answer 2

你能检查一下下面的代码吗，希望它能解决你的问题。

演示： 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>

Answer 3

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

Answer 4

您可以将文本放在图像的 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>

然后对.banner__img中的 .banner__img 应用以下样式：

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

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