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

Posted 2023-03-05

【中文标题】水平居中元素文本对齐中心不起作用

【英文标题】：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>

【参考方案1】：

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

float 导致元素：

成为一个块 shrinkwrap 其内容

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

---

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

Floating 旨在提供如下效果：

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