如何在li中居中显示文字? [英] How to center text in li?

问题描述

我试图在四个不同的li元素之间保持相等的间距，但是最终我得到了这样的结果:

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;
}

我已经测试过CSS，并且可以正常工作.我认为问题在于li的字母数量并不完全相同，因此您最终会得到一些奇怪的视觉效果.我相信这一点的原因:

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:

(等距)

推荐答案

我解决此问题的方法是将li置于ul的中心，因为ul的宽度自然会与父对象的宽度相同.

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;
}

查看此JSFiddle ，以查看它是否有效.

Check out this JSFiddle to see it working.

这篇关于如何在li中居中显示文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！