2

I am trying to center my ul, but I can't seem to get it to center. I have tried using display: table margin: 0 auto That puts the ul in the middle, but not exactly in the center. I have also tried using display: block with margin: 0 auto but that doesn't center it either

* {
 margin: 0;
 padding: 0;
 font-family: Helvetica;
}

header {
 background-color: black;
 color: white;
 padding: 25px;
 text-align: center;
}

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

li {
    float: left;
}

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

li a:hover {
    background-color: red;
}
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Droplet Games - Official Site</title>
  <link rel="stylesheet" href="css/styles-index.css">
 </head>
 
 <body>
  <header>
   <h1>DROPLET GAMES</h1>
   <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">Games</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
   </ul>
  </header>
</html>
Rob
  • 14,746
  • 28
  • 47
  • 65
Jordan Baron
  • 23
  • 3
  • 1
    Possible duplicate of [Center
    • into div](http://stackoverflow.com/questions/1708054/center-ul-li-into-div) and a multitude of similar answers found by searching SO.
     – Rob Oct 02 '16 at 21:39

3 Answers3

1

You can add this rule to the <ul>:

display: inline-block;

* {
 margin: 0;
 padding: 0;
 font-family: Helvetica;
}

header {
 background-color: black;
 color: white;
 padding: 25px;
 text-align: center;
}

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

li {
    float: left;
}

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

li a:hover {
    background-color: red;
}
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Droplet Games - Official Site</title>
  <link rel="stylesheet" href="css/styles-index.css">
 </head>
 
 <body>
  <header>
   <h1>DROPLET GAMES</h1>
   <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">Games</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
   </ul>
  </header>
</html>
Alec von Barnekow
  • 981
  • 9
  • 22
1

I assume that the issue isn't so much that you want the ul element centered, but rather you want the menu items (the li items) inside the ul to be centered.

The entire issue is solved by simply changing the style on your li from float:left to display:inline-block. See below.

* {
 margin: 0;
 padding: 0;
 font-family: Helvetica;
}

header {
 background-color: black;
 color: white;
 padding: 25px;
 text-align: center;
}

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

li {
    display:inline-block;
}

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

li a:hover {
    background-color: red;
}
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Droplet Games - Official Site</title>
  <link rel="stylesheet" href="css/styles-index.css">
 </head>
 
 <body>
  <header>
   <h1>DROPLET GAMES</h1>
   <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">Games</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
   </ul>
  </header>
</html>
random_user_name
  • 25,694
  • 7
  • 76
  • 115
1

Updated answer: use flexbox

For the best control over spacing of elements in a column or a row, I'd recommend using flexbox now that it has widespread browser support.

To use flexbox here, set display: flex; on the ul, making it the flex container. By default, this will make the ul act as a row with the li acting as flex items within that row. CSS Tricks has a great guide about using flexbox.

I've left my original answer which uses display: inline-block; below.

Original answer

Sounds like display: inline-block; is exactly what you need.

As the name alludes, an element with display: inline-block; acts as if it's an inline element as far as its parent is concerned, and internally it acts like a block element.

Its use here requires a container with width: 100%; and text-align: center;. I've used the <nav> element below. The <ul> can then be given display: inline-block; to achieve the effect you want.

You can also use display: inline-block; in combination with display: inline; for the <li> and their child <a> elements as follows, in order to avoid the float: left; use.

li {
  display: inline;
}
li a {
  display: inline-block;
  ...
}


* {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}
header {
  background-color: black;
  color: white;
  padding: 25px;
  text-align: center;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
}
li {
  display: inline;
}
li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: red;
}
nav {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
<header>
  <h1>DROPLET GAMES</h1>
  <nav>
    <ul>
      <li><a class="active" href="#home">Home</a>
      </li>
      <li><a href="#news">Games</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
      <li><a href="#about">About</a>
      </li>
    </ul>
  </nav>
</header>
Robin James Kerrison
  • 1,727
  • 1
  • 15
  • 26
  • 1
    @Harlin For better control over spacing of elements in a column or a row, I'd recommend using Flexbox. [CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) has a great guide about it. – Robin James Kerrison Mar 24 '21 at 12:04