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

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