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

Question

我正在尝试将内容集中在导航框中，但遗憾的是文本对齐中心无法按照我的想法运行。有人可以告诉我我做错了什么吗？当窗户很小时，它是完美的。但是对于全屏而言，它并没有像我预期的那样工作（它没有均匀分布，而是在前面打包。我的宽度为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>

Answer 1

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

float导致元素：

• 成为一个块
• 收缩包装其内容

...所以文本在链接中居中，这些链接的宽度足以容纳文本（因此文本居中无效）。

使用display: inline-block代替浮动列表项。

浮动旨在提供如下效果：

...不要连续放置一组块。