<img> not centered horizontally in <ul> - html

Question

I want to make a list of images that are displayed horizontally. The problem is that paragraphs are displayed correctly but images aren't.
My Code:
ul, li {
list-style-type: none;
display: inline-block;
}
img {
margin-bottom: 20px;
border: 5px solid black;
border-radius: 3px;
}
<ul>
<li>
<img src="a.png" style="max-width: 20%;">
</li>
<li>
<img src="b.png" style="max-width: 20%;">
</li>
</ul>

Answer 1

The problem is with the inline style you have added to the images. When you apply max-width: 20%, there will be a 80% empty space next to them, so that in a large screen, the images will have a large space at their right side, and in smaller screens, they will be displayed vertically because of space.
Simply add a fixed width to your images or use vw measures (example: max-width: 20vw) in order to the images get a width that is relative to the viewport width.

Answer 2

this can easily be done with flexbox by adding display: flex and justify-content: center to the ul. You can also add a flex-wrap to collapse the images on small screens if needed. You'll also need to set padding-left to 0 due to default padding on ul elements I would look into adding a reset css to help with that
ul {
justify-content: center;
display: flex;
padding-left: 0;
}
ul, li {
list-style-type: none;
}
img {
margin-bottom: 20px;
border: 5px solid black;
border-radius: 3px;
}
<ul>
<li>
<img src="a.png" style="max-width: 20%;">
</li>
<li>
<img src="b.png" style="max-width: 20%;">
</li>
</ul>