Html 列表文本居中对齐不'；行不通

我想将我的

但是现在看起来是这样的

我的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:

das团队
哲理

试试这个

如果要将行居中

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

试试这个

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

---

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

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