How do I make the menu in the center of the block?-CodePudding

My question is how do I put the menu in the middle of the header block because I can't figure it out.

I am trying to make a website for my dad's business by using some templates that I find on the internet, this is one of them and I really like but I can't figure out how to center the navbar. I am not the best when it comes to CSS.

body {
  margin: 0;
  padding: 0;
}

.logo {
  float: left;
}


/* ~~ Top Navigation Bar ~~ */

#navigation-container {
  width: 1200px;
  margin: 0 auto;
  height: 70px;
}

.navigation-bar {
  background-color: black;
  height: 70px;
  width: 100%;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
  color: white;
  text-align: center;
}

.navigation-bar li a {
  color: white;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
  text-align: center;
}

#menu {
  float: right;
  color: white;
  text-align: center;
}

<html>
<link rel="stylesheet" href="index.css" type="text/css">

<head>
  <div >
    <div id="navigation-container">
      <img src="images/logo.png">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Rent a Boat</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
  </div>
</head>

<body>

</body>

</html>

CodePudding user response：

I rewrote most parts of your code to fix the invalid markup and to include the correct semantic tags for screenreaders. Also, I changed a bit the structure to be semantically correct. Simplified your CSS.

For the invalid Markup, read my comment below your question.
Use the <header>-tag for your header. It is a semantic tag.
The image is part of the header but not part of the navigation, semantically speaking. AS such place it inside the header but not inside the navigation
Use the <nav>-tag for your navigation bar as it is also a semantic tag.
Learn about Flexbox and use it! float is a property to float an element within a text block (like in a newspaper). It is not for aligning purposes. Since 2013 we have Flexbox which is well supported since 2015!

Side Note:
I know this sounds hard but it must be said. If the coding is done for a business Homepage then no unexperienced or beginner without proper skill/knowledge-base should attempt to do it. At least not without the supervision of an experienced coder. A Business Homepage is one of the most important marketing aspects. If you screw this up, then the business will be hurt from it and your dad would lose money!

Then even for experienced coders, it is a NO-GO to just copy code from the internet and include it without correction or knowing what they include. The coder is responsible for the code and can not just state that he didn't write those code pieces originally. It is a coder's job to correct errors such as invalid markups.

body {
  margin: 0;
  padding: 0;
}


/* ~~ Top Navigation Bar ~~ */
header {
  display: flex;
  width: auto;
  align-items: center; /* vertically center the links */
}

nav {
  margin: 0 auto; /* horizontally center the links */
}

nav > ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
}

<html>

<head>
  <link rel="stylesheet" href="index.css" type="text/css">
</head>

<body>
  <header>
    <img src="https://via.placeholder.com/50.jpg">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Rent a Boat</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

CodePudding user response：

#navigation-container set max-width instread of width.
margin:0 auto will push from left and right side to #navigation-container so it will be center.
I have replace you css with better approach by using display:flex and setting justify-content:center sets it center to horizontally.
Ans it's good practice to use <header></header> tag for header and include it inside of <body> rather than in <head>

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* ~~ Top Navigation Bar ~~ */

#navigation-container {
  max-width: 1200px;
  /*you just need to set this*/
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation-bar {
  background-color: black;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display: flex;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  color: white;
  text-align: center;
}

.navigation-bar li a {
  color: white;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  padding: 5px 15px;
  opacity: 0.7;
  text-align: center;
  line-height: 70px;
}

<body>
  <header>
    <div >
      <div id="navigation-container">
        <img src="images/logo.png">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Rent a Boat</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Location</a></li>
        </ul>
      </div>
    </div>
  </header>
</body>

CodePudding user response：

I suppose you are trying to center the navbar at the top of the page. To the (.navigation-bar li) class, add the following property: display: inline-block;

body {
  margin: 0;
  padding: 0;
}

.logo {
  float: left;
}

/* ~~ Top Navigation Bar ~~ */

#navigation-container {
  width: 1200px;
  margin: 0 auto;
  height: 70px;
}

.navigation-bar {
  background-color: black;
  height: 70px;
  width: 100%;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.navigation-bar li {
  display: inline-block;    
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
  color: white;
  text-align: center;
}

.navigation-bar li a {
  color: white;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
  text-align: center;
}

#menu {
  float: right;
  color: white;
  text-align: center;
}