list text-align center doesn't work

Question

I want to center my <ul> But now it looks like this..

My CSS code:

.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

Try this...

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

".sub_menu div" is ul's parent div which is text align center.

.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

Try this.

If you want to center the row ul.

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