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

}

另外，我能够使用内联元素使其正确对齐，但我想知道是否可以使用块（例如li和div）。

Answer 1

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

试试吧

Answer 2

如果您希望将标签单独对齐到水平中心，请在标签嵌套的div上使用此行代码。

margin-left: auto;
margin-right: auto;

如果您希望将标签对齐到文本的左边缘，请为两个div使用相同的margin-left值。

这是假设您已清理默认边距并在文档开头的li和ul上填充浏览器集。

li, ul{
margin:0;
padding:0;
}

Answer 3

对于此类事情，请尝试使用margin-right:auto; margin-left: auto并为标签设置固定宽度，而不是仅应用text-align:center。

这是一个有效的JSFiddle：http://jsfiddle.net/eshellborn/SASSe/

难以对齐div

3 个答案: