水平居中元素文本对齐中心不起作用答案

【问题标题】：Horizontally centering elements text-align center not working水平居中元素文本对齐中心不起作用
【发布时间】：2016-12-17 09:29:39
【问题描述】：

我正在尝试将导航框中的内容居中，但不幸的是，文本对齐中心并没有像我想象的那样工作。有人可以告诉我我做错了什么吗？当窗户很小时，它是完美的。但是对于全屏，它没有像我预期的那样工作（它没有均匀分布，而是在前面包装。我将宽度设置为 100%，所以不知道为什么居中不起作用。谢谢。如果缩进看起来不对，我很抱歉，因为在编辑框看起来比这更准确。

#subnav {
	height: 10%;
	text-align: center;
}

#subnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: orange;
	text-align: center;
	width: 100%;
	border: 1px solid green;
	
}

#subnav li {
    float: left;
}

#subnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#subnav li a:hover {
   color: yellow;
}

   <div id="subnav">
           
           	<ul>
    		<li> <a href="#">Mom </a></li>
        		<li> <a href="#">Dad </a></li>
    		<li> <a href="#">Grandad </a></li>
    		<li> <a href="#">Grandma </a></li>
                    <li> <a href="#">Auntie </a></li>
                    <li> <a href="#">Uncle </a></li>
            	<li> <a href="#">Son </a></li>
                    <li> <a href="#">Daughter </a></li>



    </ul>

           </div>

【问题讨论】：

标签： html text centering

【解决方案1】：

text-align 将元素的内联内容居中。

float 导致元素：

成为一个块
shrinkwrap 其内容

...所以文本在链接中居中，链接的宽度正好足以容纳文本（因此文本居中没有效果）。

使用display: inline-block 而不是浮动列表项。

Floating 旨在提供如下效果：

…不要将一组积木排成一行。

【讨论】：