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

Question

I am building my first project, I need to make the title <h2> in the navbar ("la poma") centered in the <div> instead of the right position.

Using flexbox, or float, is not working; are there any suggestions how I can solve this? Should I use CSS grid, or padding?

Thanks in advance.

* {
  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>

It is not entirely clear to me how the final layout should look like. Should it appear between `offer` and `menu`, but on the same row? — t.niese, Jun 04 '22 at 16:15

score 1 · Accepted Answer · answered Jun 04 '22 at 16:19

One approach, with explanatory comments in the code:

/* 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>

score -1 · Answer 2 · answered Jun 04 '22 at 16:13

-1

@Osama. If you'd like to set logo center of header, it would be better to use absolute position rather than flex box.

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

BTW, nav menus can be overlapped with logo on smaller screens, but I assume you may handle this with Hamburger menu. Hope this helps. Happy coding~ :)

answered Jun 04 '22 at 16:13

WebMonster

217
1
6

`position: absolute` - like so much other 'bad' code in general - has its place*, but otherwise I'd strongly suggest you're wrong in this instance: `position: absolute` takes the element outside of the document-flow, and leaves the user to keep track of its positioning (under all screen sizes) and preventing the absolutely-positioned element(s) from obscuring the content beneath. (* this does not extend to the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink), or [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) elements). – David Thomas Jun 04 '22 at 16:22

score -1 · Answer 3 · answered Jun 04 '22 at 16:18

-1

You just replace nav class css with h2 class css then it will work,

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

answered Jun 04 '22 at 16:18

iqbal hossain

103
5

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

3 Answers3