HTML center nav bar

Question

How can I center my nav bar, but still appear as a line in the top of the site? I know i must change something in the css file where li is built, but i can't figure it out. The code is:

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>

And the css file is like:

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #791519;
}

Possible duplicate of [How to make a
display in a horizontal row](http://stackoverflow.com/questions/885691/how-to-make-a-ul-display-in-a-horizontal-row) — caramba, Oct 16 '16 at 16:31

score 2 · Accepted Answer · answered Oct 16 '16 at 16:23

2

I would wrap it in an NAV tag and set on the NAV tag text-align to center.

nav {
  text-align:center;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  margin:0 auto;

}


<nav>
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>
</nav>

Example

answered Oct 16 '16 at 16:23

Erik Simonic

457
3
13

Thanks! That was much easier than the 1st response! Thanks! – xitro Oct 16 '16 at 16:26
you should accept this or the one with flex box, I do prefer this method as flex box can be still unsupported. – Erik Simonic Oct 16 '16 at 16:27
Yeah, I prefer your way too, because flex is way too much. With yours, using padding I can make it as tall and long I want. Many thanks! – xitro Oct 16 '16 at 16:30
One other thing. How can I add a search tab with a button which has an icon to your way? – xitro Oct 16 '16 at 16:37
Check the code pen. I did a change.. It may suit your needs. – Erik Simonic Oct 16 '16 at 16:45
Thanks again Erik! – xitro Oct 16 '16 at 16:53
If you mean the icon I added 🔍 myself. But thanks for bothering! Lastly, how can I make it animated? I mean, when you click on the icon, a space like you made, appears on the right of the search icon and not below. – xitro Oct 16 '16 at 16:57
you may use some padding and an absolute positioned input box.. maybe – Erik Simonic Oct 16 '16 at 17:11

score 0 · Answer 2 · answered Oct 16 '16 at 16:21

I recommend using Flex Box:

ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  list-style-type: none;
  width:100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li{
  flex-grow: 1;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #791519;
}

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>

score 0 · Answer 3 · answered Oct 16 '16 at 16:45

Maybe this (add wrap and text-align: center):

.center {
  margin: 0 auto;
  text-align: center;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #791519;
}

<div class="center">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="index.html">Tab 1</a></li>
    <li><a href="index.html">Tab 2</a></li>
    <li><a href="index.html">Tab 3</a></li>
    <li><a href="index.html">Tab 4</a></li>
  </ul>
</div>

score -1 · Answer 4 · answered Oct 16 '16 at 16:17

You can make this by changing the position of ul Check the following css changes for ul

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position:relative;
  left:100px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #791519;
}

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>

Hope this helps

Thank you! Now I can change the position with pixels! Thanks! — xitro, Oct 16 '16 at 16:21
This doesn't center the nav bar. It only adds 100 pixel spacing at the left. — Barry The Wizard, Oct 16 '16 at 16:25

HTML center nav bar

4 Answers4