zmalter99 zmalter99 - 7 months ago 32
HTML Question

Center Menu Bar Links

I'm trying to center the menu bar links. In the css every time I try to center it, it puts each link on a new line. So I make it

float:center
; and it makes each link a new line and just doesn't center it all. Any ideas?



body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
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: #4CAF50;
}

<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a href="#news">News</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>




Answer

use display:flex and justify-content:center in your ul (remove the float:left from li)

Float:center doesn't exist.

body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display:flex;
  justify-content:center
}

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: #4CAF50;
}
<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>

Comments