Navigation Bar Wont Display In The Center Of The Webpage

Question

so my issue is that my navbar wont display in the center of the screen (horizontally) and I dont understand why, this is something I have regular issues with so if you could help it would be greatly appreciated. Heres a link to the code

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*******************
HEADER
*******************/
#logo {
  display: block;
  margin: 0 auto;
  height: 14em;
}

#name {
  text-align: center;
}

/*******************
NAV BAR
*******************/

nav ul {
  list-style-type: none;
  overflow: hidden;
  text-align: center;
}

nav li {
  float: left;
  display: inline-block;
}

nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
}

  <body>
    <header>
      <img id="logo" src="img/under-construction.png" />
      <h1 id="name">Team Kangoo Anywhere</h1>
      <nav>
        <ul>
          <li><a href="home.html"></a>Home</li>
          <li><a href="about-us.html"></a>About Us</li>
          <li><a href="about-the-rally.html"></a>About The Rally</li>
          <li><a href="our-car.html"></a>Our Car</li>
          <li><a href="charities.html"></a>Charities</li>
          <li><a href="sponsors.html"></a>Sponsors</li>
          <li><a href="contact-us.html"></a>Contact Us</li>
        </ul>
      </nav>
    </header>

thanks a mill! just asking because I always have this issue, how are all of the li on the same line without float left? — james, Mar 21 '17 at 21:10
@james because `inline-block` displays things `inline`, like normal text. You could also use `display: inline` and they would display side by side. Look up "[the difference between inline, inline-block, and block](https://www.google.com/search?q=the+difference+between+inline%2C+inline-block%2C+and+block)" — Michael Coker, Mar 21 '17 at 21:12
is there any way to fix this https://jsfiddle.net/#&togetherjs=7CKVa8CwoM — james, Mar 21 '17 at 21:33
@james on my answer... https://jsfiddle.net/RachGal/0oktorfg/ — Rachel Gallen, Mar 21 '17 at 22:16

Rachel Gallen · Accepted Answer · 2017-03-21T21:32:04.750

Ideally you should have some header css to center it's contents, then you could align the nav li s any which way you want. I created a fiddle (same as snippet) to demonstrate, and added padding to the li elements (or else they'd have been all squished together)

Hope this helps.

body {
  width: 100%;
  margin: 0;
  padding: 0;
}


/*******************
HEADER
*******************/

header {
  display: block;
  margin: 0 auto max-height: 20em;
}

#logo {
  display: block;
  margin:auto;
  height: 14em;
}

#name {
  text-align: center;
}


/*******************
NAV BAR
*******************/
/*nav{text-align:center;}*/
nav ul {
  list-style-type: none;
  overflow: hidden;
  text-align: center;
}

nav li {
  float: left;
  display: inline-block;
  padding-right: 7px;
}

nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
}

<header>
  <img id="logo" src="img/under-construction.png" />
  <h1 id="name">Team Kangoo Anywhere</h1>
  <nav>
    <ul>
      <li>
        <a href="home.html"></a>Home</li>
      <li>
        <a href="about-us.html"></a>About Us</li>
      <li>
        <a href="about-the-rally.html"></a>About The Rally</li>
      <li>
        <a href="our-car.html"></a>Our Car</li>
      <li>
        <a href="charities.html"></a>Charities</li>
      <li>
        <a href="sponsors.html"></a>Sponsors</li>
      <li>
        <a href="contact-us.html"></a>Contact Us</li>
    </ul>
  </nav>
</header>

if you text-align your li s to the center it looks better https://jsfiddle.net/794wL61n/1/ — Rachel Gallen, Mar 21 '17 at 21:36

score 0 · Answer 2 · answered Mar 21 '17 at 21:09

0

Change

nav li {
  float: left;
  display: inline-block;
}

to

nav li {
  // Remove float
  display: inline-block;
}

answered Mar 21 '17 at 21:09

thisiskelvin

4,136
1
10
17

score 0 · Answer 3 · answered Mar 21 '17 at 21:13

0

Add a wrapper to the nav using a div tag, make the nav display inline and use text-align on the div.

<div style="text-align:center"><nav style="display:inline-block">

... and then google Bootstrap

answered Mar 21 '17 at 21:13

Kirk Powell

908
9
14

If you look at their existing code, none of this is necessary. They already have `text-align: center` on the nav elements' parent, and `display: inline-block` on the nav elements themselves. They floated the nav elements `left` so removing that `float` is all that needs to change and their nav is centered. – Michael Coker Mar 21 '17 at 21:16
I assumed his fix needed to preserve the ```float:left``` for the ```nav li``` – Kirk Powell Mar 21 '17 at 21:23
1

ah gotcha, roundabout but it works! But they thought the only way to make li's display side by side was to float them. They didn't realize `inline-block` does that, too, and without the `float`, `inline-block` allows `text-align` on the parent to center them. – Michael Coker Mar 21 '17 at 21:27

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

After removing the float: left you can use display: flex for <ul> or display: inline for it's children <li>s.

And you have an unwanted left padding in the <ul> that it is better to remove it to make real center.

ul { margin: 0; padding: 0; }

You can have a look at this post.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 21 '17 at 21:16

Farzin Kanzi

3,380
2
21
23

Navigation Bar Wont Display In The Center Of The Webpage

4 Answers4