How do I center an unordered list? [duplicate] - html

Question

This question already has answers here:
How to center an unordered list?
(8 answers)
How can I center <ul> <li> into a div?
(16 answers)
Closed 2 years ago.
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>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>

Answer 1

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>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>

Answer 2

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;
}

Answer 3

<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>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>

Answer 4

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>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>

Answer 5

Just change your .navbar class like this
.navbar {
display: flex;
justify-content: center;
}