如何在 li 中居中文本？答案

【问题标题】：How to center text in li?如何在 li 中居中文本？
【发布时间】：2016-01-08 00:52:39
【问题描述】：

我试图让四个不同的 li 元素之间的间距相等，但我最终得到了这个：

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 的字母数量并不相同，因此您最终会得到一些奇怪的视觉效果。我相信这一点的理由：

（等间距）

【问题讨论】：

this 是您要找的吗？
@Lucio 当然是！您可以将其发布在带有解释的答案中吗？
尝试使用弹性框：stackoverflow.com/a/33049198/3597276

标签： html css web html-lists

【解决方案1】：

我解决这个问题的方法是将 li 放在 ul 上，因为 ul 自然会与父级宽度相同。

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

查看this JSFiddle 看看它是否正常工作。

【讨论】：

【解决方案2】：

试试这个

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

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

【讨论】：