Как отобразить меню в верхней части изображения с заголовком в середине изображения?

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

Я несколько упростил ваш код (возможно, недостаточно), но вы можете понять (пожалуйста, отметьте Как создать минимальный воспроизводимый пример ):

.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 : ссылка на кодовое поле, поскольку здесь не отображается предварительный просмотр (я думаю, что-то связанное с абсолютным позиционированием): 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

Вы можете поместить текст в 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 в css:

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

Текст теперь остается вцентр, даже если вы измените размер окна. Flexbox позволяет выравнивать элементы как по вертикали, так и по горизонтали.

Answer 4

Используйте <nav> для меню и используйте атрибут align для центрирования заголовка.