How to center unordered list of images? [duplicate] - html

Question

This question already has answers here:
How to center an unordered list?
(8 answers)
Closed 3 years ago.
I am trying to center an unordered list of imagines on a website.
I have tried using 'text-align: center;', margins(which works, kinda, but looks super sloppy)
#nav{
margin-left:44%;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: transparent;
height: 40px;
margin-bottom: 100px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: transparent;
float: left;
text-align: center;
display: inline;
}
<div id="nav">
<ul>
<li>
<img src='./public/images/discord.png' style="height:40px;border:0;">
</li>
<li>
<img src='./public/images/youtube.png' style="height:40px;">
</li>
<li>
<img src='./public/images/twitch.png' style="height:40px;border:0;">
</li>
</ul>
</div>
The list just doesn't center properly, as expected with manually set margins.

Answer 1

I recommend using flex box to handle problems like these. The first example in the snippet shows centering using flex box. The second example shows centering an unordered list.
To center an unordered list, I've set the margin left and right on the containing element (#nav) to auto. For this to center the list, you will need to know the exact width of the list. I've calculated to be 3 x 40px for each image, plus 20px for spacing for each image, making 180px in total.
A common problem some run into when dealing with undordered is that lists come with default padding on the left. For perfect centering, I've removed the list style bullets, and removed the padding too.
.flex {
display: flex;
justify-content: center;
}
.flex>div {
margin-right: 20px;
}
#nav {
margin: 0 auto;
width: 180px;
}
#nav>ul {
padding-left: 0px;
}
#nav li {
list-style-type: none;
text-decoration: none;
float: left;
margin-right: 20px;
}
<h2>Display flex</h2>
<div class="flex">
<div>
<img src='https://picsum.photos/40' style="height:40px;border:0;">
</div>
<div>
<img src='https://picsum.photos/40' style="height:40px;">
</div>
<div>
<img src='https://picsum.photos/40' style="height:40px;border:0;">
</div>
</div>
<h2>Centered UL</h2>
<div id="nav">
<ul>
<li>
<img src='https://picsum.photos/40' style="height:40px;border:0;">
</li>
<li>
<img src='https://picsum.photos/40' style="height:40px;">
</li>
<li>
<img src='https://picsum.photos/40' style="height:40px;border:0;">
</li>
</ul>
</div>