How do I center an unordered list?

Question

I have a list and css.

However the ul goes to the left. I have tried many things but it either stays inline and floats to the left or it goes to the center as I want it to, but then it's not inline, they stack on one another..how can I have both an centered ordered list and inline?

.navbar {
  display: table;
  margin: 0 auto;
  width: 100%;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

.navbar ul li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 16px;
  font-size: 25px;
  text-decoration: none;
}

<div class="navbar">
  <ul>
    <li><a href="#">The Stock</a></li>
    <li>
      <a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
    </li>
    <li><a href="#">The Stock</a></li>
  </ul>
</div>

score 2 · Answer 1 · answered Dec 03 '20 at 15:54

To center the navbar ul add text-align: center;

.navbar {
  display: table;
  margin: 0 auto;
  width: 100%;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  text-align: center;
}

.navbar ul li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 16px;
  font-size: 25px;
  text-decoration: none;
}

<div class="navbar">
  <ul>
    <li><a href="#">The Stock</a></li>
    <li>
      <a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
    </li>
    <li><a href="#">The Stock</a></li>
  </ul>
</div>

score 1 · Answer 2 · edited Dec 03 '20 at 15:57

1

All you need is "text-align:center;" on your .navbar ul like below:

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  text-align: center;
}

edited Dec 03 '20 at 15:57

Dharman

30,962
25
85
135

answered Dec 03 '20 at 15:52

score 0 · Answer 3 · answered Dec 03 '20 at 15:49

Just use display: flex; justify-content: center; for either <ul> tag or navbar div container.

.navbar {
  display: table;
  margin: 0 auto;
  width: 100%;
}

.navbar ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

.navbar ul li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 16px;
  font-size: 25px;
  text-decoration: none;
}

<div class="navbar">
  <ul>
    <li><a href="#">The Stock</a></li>
    <li>
      <a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
    </li>
    <li><a href="#">The Stock</a></li>
  </ul>
</div>

why use `flexbox` instead of simply aligning an text-element with `text-align`? — tacoshy, Dec 03 '20 at 15:54

tacoshy · Accepted Answer · 2020-12-03T16:04:06.007

<li> runs as a text element because of your css .navbar ul li { display: inline-block; }. therefor you can center it with text-align. In this case just add: .navbar { text-align: center; }

.navbar {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

.navbar ul li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 16px;
  font-size: 25px;
  text-decoration: none;
}

<div class="navbar">
  <ul>
    <li><a href="#">The Stock</a></li>
    <li>
      <a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
    </li>
    <li><a href="#">The Stock</a></li>
  </ul>
</div>

score -1 · Answer 5 · edited Dec 03 '20 at 16:26

-1

Just change your .navbar class like this

.navbar {
   display: flex;
   justify-content: center;
}

edited Dec 03 '20 at 16:26

MaxiGui

6,190
4
16
33

answered Dec 03 '20 at 15:50

user1592129

461
1
5
16

why switching to `flexboxes` to center a text that could easily be aligned with `text-align`? – tacoshy Dec 03 '20 at 15:57
As only inline element can be aligned with text-align – user1592129 Dec 03 '20 at 16:15
I don't know to down voted this answer, without any reason. – user1592129 Dec 03 '20 at 18:20
I guess because of missing simplicity. The li is already declared as an inline-element by the op so it can be aligned with text-align. – tacoshy Dec 03 '20 at 21:19

How do I center an unordered list?

5 Answers5