列表文本对齐中心不起作用答案

【问题标题】：list text-align center doesn't work列表文本对齐中心不起作用
【发布时间】：2014-03-22 19:49:31
【问题描述】：

我想将我的<ul> 居中但是现在看起来是这样的..

我的 CSS 代码：

.sub_menu {
    background-image: url("../images/background_sub_navi.png");
    background-position: center center;
    height: 44px;
}

.sub_menu ul {
    display: inline-block;
    list-style-type: none;
}

.sub_menu ul li {
    float: left;
    font-family: 'Open Sans',sans-serif;
    height: 41px;
    margin-right: 20px;
    margin-top: 7px;
}
.sub_menu_arrow {
    background-image: url("../images/sub_menu_border_active.png");
    background-position: center 17px;
    bottom: -4px;
    display: block;
    height: 19px;
    left: 50%;
    margin-left: -75px;
    position: absolute;
    width: 160px;
}

HTML：

<div class="sub_menu">
            <div style="text-align: center;">
                <ul>
                <li class="active">das Team <span class="sub_menu_arrow"></span></li>
                <li>Philosophie</li>
                </ul>
                <div class="kontaktbar_wrap" style="display: none;"></div>
             </div>
</div>

【问题讨论】：

你能提供一个小提琴或一个真实代码页面的链接吗？

标签： html css center text-align

【解决方案1】：

试试这个...

.sub_menu {
    background-image: url("../images/background_sub_navi.png");
    background-position: center center;
    height: 44px;
    margin-top: -5px;
    position: relative;
}

“.sub_menu div”是ul的父div，即文本居中对齐。

.sub_menu div{
    position: absolute;
    text-align: center;
    width: 100%;
}

.sub_menu_arrow{
    background-image: url("../images/sub_menu_border_active.png");
    background-position: center 17px;
    bottom: -4px;
    display: block;
    height: 19px;
    left: 50%;
    margin-left: -24px;
    position: absolute;
    width: 160px;
}

【讨论】：

【解决方案2】：

试试这个。

如果你想将行 ul 居中。

ul.sub_menu { display: block; text-align:center; }
ul.sub_menu li { display: inline-block; }

【讨论】：