難以對齊的div

有一些類似的話題，但我看的沒有一個幫助我解決了我遇到的問題。基本上，我有一組要在頁面中心對齊的選項卡。不幸的是，它們顯得稍微偏左，看起來非常糟糕。也許我錯過了一些顯而易見的東西，但是在仔細研究代碼幾乎一小時之後，我開始認爲這個問題有點複雜。難以對齊的div

我準備了的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); 

}

而且，我能得到它的正確使用內聯元素對齊，但我想知道這是否是可能的（做塊如李和div）。

來源

2013-08-28 Meredith

它在我的瀏覽器爲中心的，你要垂直居中呢？ –

下面是它在我的瀏覽器中的樣子：http://i.imgur.com/BkXpk8G.png。你能發佈你的截圖嗎？ – Meredith

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

嘗試

來源

2013-08-28 03:11:11 Parfait

美麗！謝謝 – Meredith

如果你正在尋找一個人對齊選項卡水平中心，使用此行代碼在其中的標籤是嵌套股利。

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

如果您希望將選項卡與文本的左邊緣對齊，請爲兩個div使用相同的margin-left值。

這是假設您已經清除了默認邊距並在文檔的開頭填充了li和ul上的瀏覽器集。

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

來源

2013-08-28 03:18:26

對於這種事情，請嘗試使用margin-right:auto; margin-left: auto並設置固定寬度的標籤，而不是僅僅將text-align:center。

這裏有一個工作的jsfiddle：http://jsfiddle.net/eshellborn/SASSe/

來源

2013-08-28 03:21:12 eshellborn

難以對齊的div

回答

相關問題