javascript - 难以对齐 div

Question

有很多类似的主题，但我看过的主题都没有帮助我解决我遇到的问题。基本上，我有一组选项卡，我想在我的页面中心对齐。不幸的是，它们出现在中心偏左的位置，看起来非常糟糕。也许我错过了一些明显的东西，但在研究了将近一个小时的代码之后，我开始认为这个问题有点复杂。

我准备了一个jsFiddle:http://jsfiddle.net/5NTY5/

 <div style="text-align:center;">The tabs below should line up with this text.</div>
<br/>
<div style="text-align:center;">
    <ul class="_t_ul">
        <li class="_t_li">Tab 1</li>
        <li class="_t_li">Tab 2</li>
        <li class="_t_li">tab 3</li>
    </ul>
</div>
<br/>
<div style="text-align:center;">As you can see, it isn't even close.</div>

 ._t_ul {

    line-height:33px;

    list-style:none;

}

._t_li {

    display: inline;

    cursor:pointer;

    text-align:center;

    color: #698da5;

    font-family:'Anton', sans-serif;

    font-size: 14px;

    font-weight:bold;

    text-align:center;

    padding:16px;

    background-color: rgba(82%, 82%, 82%, 0.5);

    border: 1px solid #acadaf;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

}

._t_li:hover {

    background-color: rgba(82%, 82%, 82%, 0.8);

}

此外，我能够使用内联元素使其正确对齐，但我想知道是否可以使用 block (例如 li 和 div)。

Answer 1

._t_ul {
   padding: 0;
    margin: 0;
    line-height: 33px;
    list-style: none;
}

尝试一下