How do I center a navigation bar in HTML/CSS?

Question

Baically - I am new to HTML/CSS and I want to center this navigation bar:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
}

li a {
  display: block;
  text-decoration: none;
  padding: 15px 15px;
  background-color: rgb(4, 210, 129);
  font-weight: 800;
  font-family: "Monospace", Lucida Console;
  color: white;
}

li a:hover {
  background-color: rgb(109, 245, 208);
}

li img {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
}

div {}

.current {
  background-color: rgb(109, 245, 208);
}

.end {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
  padding: 23px;
  box-sizing: border-box;
  width: 40%
}

<header>
  <nav>
    <div>
      <ul>
        <li><img src="IMG/logo.png" class="logo" /></li>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Contact</a></li>
        <!-- <li class="end"></li> -->
      </ul>
    </div>
  </nav>
</header>

What I would like to know, is why I can't control the nav bar by using the div element, or by assigning a class or id?

The only way I can control it is by using li a, li img etc.

Why is this? and is there a better way to do it? Thanks.

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Temani Afif, Jan 06 '18 at 23:12
https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Temani Afif, Jan 06 '18 at 23:13
https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css — Temani Afif, Jan 06 '18 at 23:13
https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally — Temani Afif, Jan 06 '18 at 23:13
https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — Temani Afif, Jan 06 '18 at 23:14
https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block — Temani Afif, Jan 06 '18 at 23:15
https://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu — Temani Afif, Jan 06 '18 at 23:16
https://stackoverflow.com/questions/24492388/center-menu-inside-div — Temani Afif, Jan 06 '18 at 23:17

cabbage · Answer 1 · 2018-01-06T23:38:09.797

I think the problem is that you're using float: left on your li items. To quote from mozilla web docs;

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow [...]

Because it's escaped from the flow, doing text-align: center will not affect the li objects.

Instead of using float: left, try display: inline-block to achieve the desired effect, on both li and a. This leaves a space between the blocks (which is really just all the spaces in your file from indenting), but that can be fixed by setting font-size: 0 in the containing element (ul); you'll just have to style the font size in the objects where there actually is text to the appropriate size. Once you do that you can apply text-align: center to the ul element to center the objects.

Here's a demonstration. To see the result, click the "run code snippet" button. (PS: As Facundo said, you don't need the div surrounding the ul element.)

ul {
  list-style-type: none;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
}

li a {
  display: inline-block;
  text-decoration: none;
  padding: 15px 15px;
  background-color: rgb(4, 210, 129);
  font-weight: 800;
  font-size: 16px;
  font-family: "Monospace", Lucida Console;
  color: white;
}

li a:hover {
  background-color: rgb(109, 245, 208);
}

li img {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
}

div {}

.current {
  background-color: rgb(109, 245, 208);
}

.end {
  display: block;
  text-decoration: none;
  background-color: rgb(4, 210, 129);
  padding: 23px;
  box-sizing: border-box;
  width: 40%
}

<!DOCTYPE html>
<html>

<head>
  <title>Lorem</title>
  <link rel="stylesheet" type="text/css" href="CSS/stylesheet.css" />
</head>
<header>

  <nav>
    <ul>
      <li><img src="IMG/logo.png" class="logo" /></li>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Store</a></li>
      <li><a href="#">Contact</a></li>
      <!-- <li class="end"></li> -->
    </ul>
  </nav>
</header>

<body>


</body>

</html>

Thanks, the reason I put the nav there was to assign it a class and try to style by class not by the tags. But it doesn't work all together, it has to be seperated and styled by tags. Why is this and how can I fix it? - https://www.w3schools.com/css/css_navbar.asp code from here — Danny Fairbrass, Jan 06 '18 at 23:30
This is for the same reason I previously mentioned; the `float` class moves the objects out of the flow of the document. You can basically move all the changes I added to the `ul` styling onto a class like `.navigation` and it'll have the same effect once you give the `ul` object the `navigation` class. — cabbage, Jan 06 '18 at 23:33
Does this mean I can have something like:

.navbar { every bit of styling } then not need to use any tags in the css? — Danny Fairbrass, Jan 06 '18 at 23:39
You can do something like `.navbar {font-size: 0; text-align: center}` in the CSS, though you'll still need to keep the `li` formatting since those don't have classes attached to them (like `.navbar li {display: inline-block; font-size: 16px; [...other styling you have...]}`) — cabbage, Jan 06 '18 at 23:44

How do I center a navigation bar in HTML/CSS?

1 Answers1