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)

Is [this](https://jsfiddle.net/vrudbLpb/1/) what you're looking for? — Lucio, Oct 10 '15 at 00:41
@Lucio Sure is! Can you post it in an answer with an explanation? — Hunter S, Oct 10 '15 at 00:53
try using flexbox: http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Oct 10 '15 at 02:15

score 4 · Accepted Answer · answered Oct 10 '15 at 00:59

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.

rafahell · Answer 2 · 2015-10-10T00:44:46.117

0

Try this

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

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

edited Oct 10 '15 at 00:44

answered Oct 10 '15 at 00:39

rafahell

317
1
7

How to center text in li?

2 Answers2

Linked