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

Question

我想以<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>

Answer 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;
}

Answer 2

试试这个。

如果你想把行放在中心位置

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