How to center text in li?

Question

I am trying to have equal spacing between four different li elements, but I end up with this:

HTML:

<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>

CSS:

ul li { 
     width: 25%;
     display: inline-block;
     text-align: center;
}

I have tested the CSS and it is working as it should. I think the problem is that the li's don't all have the same amount of letters, so you end up with some weird visual effects. My reason for believing this:

(Equal spacing)

Windbreak

Is this what you're looking for? – Disaccord

@Disaccord Sure is! Can you post it in an answer with an explanation? – Windbreak

try using flexbox: https://mcmap.net/q/36477/-flexbox-center-horizontally-and-vertically – Dira

Answer 1

My approach with this issue is to center the li on the ul since the ul will naturally be the same width than the parent.

ul {
    /* Use flex boxes to align li items */
    display: flex;
    justify-content: space-around;
    /* Remove default padding from major browsers */
    padding: 0;
    /* Hide the default decorations for li items */
    list-style: none;
}
ul > li {
    /* Display the elements in one line */
    display: inline-block;
}

Check out this JSFiddle to see it working.

Disaccord

Answer 2

Try this

ul {
    width:100%;
    margin-left: 0;
    margin-bottom: 0
} 

li { 
     list-style-type: none;
    display: inline-block;
    margin-right: 20px;
}

Autobiographical