Как расположить фон по центру элемента так что бы само меню не съехало? CSS

Question

Нужно сделать так,что бы фон был посередине элемента,как по горизонтали так и по вертикали,у меня получается только так,что меню съезжает к центру фона а не фон подстраивается под элемент(

wrapper {
  max-width: 1166px;
  margin: 0 auto;
}
.wrapper .wrapper__container {
  display: flex;
  justify-content: space-between;
}
.wrapper .wrapper__container__logo {
  margin-top: 22px;
}
.wrapper .wrapper__container__menu {
  margin-top: 42px;
}
.wrapper .wrapper__container__menu li {
  display: inline-flex;
  font-family: "Lato";
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  padding-left: 39px;
}
.wrapper .wrapper__container__menu .wrapper__container__menu_item {
  background: url(../img/backgrounds/back.png) 0 0 no-repeat;
  width: 81px;
  height: 34px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="img/logo/Shape_8.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
    <title>Boost</title>
  </head>
  <body>
    <header>
      <div class="wrapper">
        <div class="wrapper__container">
          <div class="wrapper__container__logo">
            <img
              class="wrapper__container__logo_image"
              src="img/logo/Shape_8.png"
              alt="logotype"
            />
          </div>
          <div class="wrapper__container__menu">
            <ul>
              <li class="wrapper__container__menu_item">Home</li>
              <li>Service</li>
              <li>About us</li>
              <li>Pricing table</li>
              <li>How it work</li>
              <li>Happy Clients</li>
              <li>Contact Us</li>
            </ul>
        </div>
      </div>
    </header>

Answer 1

Так и не понял толком, что вам надо. Так?

.wrapper .wrapper__container__menu .wrapper__container__menu_item {
  background: url(https://moskeramika.ru/upload/resize_cache/iblock/36a/240_240_1/6dda678d_2865_11e8_a4f6_e4115bd6b260_20cc25a4_420c_11e8_b66f_e4115bd6b260.jpeg) 0 0 no-repeat;
  width: 81px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  list-style: none;
}

<div class="wrapper">
  <div class="wrapper__container">
    <div class="wrapper__container__menu">
      <ul>
        <li class="wrapper__container__menu_item">Home</li>
      </ul>
    </div>
  </div>
  </header>

БЛОГ НА HUSL

Как расположить фон по центру элемента так что бы само меню не съехало? CSS

Ответы (1 шт):