如何让 h2 位于导航栏的中间而不是右边？

Question

我正在构建我的第一个项目，我需要使导航栏（“la poma”）中的标题 <h2> 居中于 <div> 而不是正确的位置。

使用 flexbox 或 float 不起作用；有什么建议可以解决这个问题吗？我应该使用 CSS 网格还是填充？

提前致谢。

* {
  margin: 0%;
  padding: 0%;
}

body {
  background: url(./pexels-huy-phan-1383776.jpg) no-repeat;
  background-size: cover;
}

nav {
  display: flex;
  justify-content: center;
}

.header {
  display: flex;
  padding: 5px 15px;
}

.menu ul {
  display: flex;
  float: left;
}

.menu li {
  padding: 10px 5px;
  list-style: none;
}

.Title {
  display: flex;
  align-items: center;
}

header {
  background-color: orange;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/3ed3936107.js" crossorigin="anonymous"></script>
  <title>Document</title>

  <body>
    <header>
      <nav>
        <div class="menu">
          <ul class="menu-list">
            <li>Home</li>
            <li>offer</li>
            <li>menu</li>
            <li>Branches</li>
          </ul>
        </div>
      </nav>
      <h2>La poma</h2>
    </header>

  </body>

</html>

Answer 1

@奥萨马。如果你想设置 logo 中心 header，最好使用绝对位置而不是 flex box。

.header {
  position: relative;
}
.header h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

顺便说一句，在较小的屏幕上，导航菜单可以与徽标重叠，但我想您可以使用 Hamburger 菜单来处理这个问题。希望这可以帮助。编码愉快~:)

Answer 2

你只要把nav class css换成h2 class css就可以了,

h2 {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

Answer 3

一种方法，在代码中带有解释性注释：

/* note that I've removed the vast majority of your CSS, as it
   was either complicating things, unnecessary or counter-
   productive; this isn't intended as a criticism, you will
   get better as you practice: */
* {
  margin: 0%;
  padding: 0%;
}

header {
  /* using CSS grid: */
  display: grid;
  /* creating three grid-columns of equal width: */
  grid-template-columns: repeat(3, 1fr);
}

/* the <nav> is placed in the first column, along with its
   descendant elements, the only one we need to style is the
   very-wrapped-up ul (via its class-name): */
.menu-list {
  /* flex layout, left in its default inline/row arrangement: */
  display: flex;
  /* laying the child <li> elements with the free-space between the
     elements and the start/end of the parent <ul> and their
     siblings: */
  justify-content: space-around;
  /* removing the default list-markers: */
  list-style-type: none;
}

/* the <h2> is placed into the second column: */
h2 {
  /* along with text-align: center to center its text: */
  text-align: center;
}

<header>
  <nav>
    <div class="menu">
      <ul class="menu-list">
        <li>Home</li>
        <li>offer</li>
        <li>menu</li>
        <li>Branches</li>
      </ul>
    </div>
  </nav>
  <h2>La poma</h2>
</header>

如何让 h2 位于导航栏的中间而不是右边？

how to get the h2 in the middle of the navbar instead of the right?

html

css