UPDATE: Including an image for better visualization:
[![Check out the image link][1]][1]
To understand more clearly, refer to this fiddle: https://jsfiddle.net/c7jazc9z/2/
Currently, I have a list with items aligned to the left. The goal is to center this list on the screen based on the longest item it contains. This can be achieved using display:inline-block.
However, when trying to set a max-width on the list and the items wrap due to limited width, it creates unnecessary empty space on the right side, making the alignment appear off.
This gives the impression that the list is not actually centered below the headline, even though it technically is.
Looking for suggestions on how to fix this issue. (Feel free to suggest the use of any other HTML elements)
body {
background: gray;
margin: 100px 0;
text-align: center;
}
div {
max-width: 300px;
margin: 0 auto;
}
ul {
background: pink;
display: inline-block;
list-style-type: none;
padding: 0;
text-align: left;
}
li {
font-size: 24px;
}<div>
<h1>Headline</h1>
<ul>
<li>This is a the longest line, at least here.</li>
<li>This one's short.</li>
<li>And this one so and so.</li>
</ul>
</div>