【问题标题】:CSS: Text wont center?CSS:文本不会居中?
【发布时间】:2012-03-13 20:07:42
【问题描述】:

有人能看出我哪里出了问题吗?我正在尝试使用 CSS 将文本置于导航按钮的中心。

#nav {
margin:20px 0 0 0;

}

#nav ul {
margin:0;
}

#nav li:first-child {
width:80px;
height:30px;
display:inline-block;
background-color:#8f00ae;
text-align:center;
 }   
#nav ul li a {  
}

这是我的 html。

    <!-- Navigation Section -->
        <div class="cl" id="nav">
            <div class="menu-top_nav-container">
<ul id="menu-top_nav" class="menu">
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13">
<a href="http://localhost:8888/?cat=3">Features</a>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category   menu-item-18">
<a href="http://localhost:8888/?cat=4">Noize Live</a>
</li>
</ul>
</div>
</div>

【问题讨论】:

    标签: html css wordpress alignment


    【解决方案1】:

    可能是因为导航正在浮动..因此它不响应 text-align:center;如果无法访问整个 html 和 css 工作表,这很困难,但请尝试以下操作:

    #nav li:first-child a 
    {
    padding: 0 20px;
    }
    

    【讨论】:

    • 浮动不影响 text-align:center;
    • 谢谢。这就是问题所在。在样式表的下方,它是浮动的。
    • 它设置为 inline-block 并具有定义的宽度。浮动不会强制元素折叠。如果向其添加左右填充“固定”居中,那是因为宽度不够宽,无法提供居中文本的感觉。
    • 我没有添加任何填充删除浮动确实解决了问题。
    猜你喜欢
    • 1970-01-01
    • 2012-04-18
    • 2014-11-20
    • 2014-10-22
    • 1970-01-01
    • 2018-05-19
    • 2018-01-09
    • 1970-01-01
    • 2019-04-17
    相关资源
    最近更新 更多