爲什麼沒有寬度的表格標籤可以居中

我正在閱讀中心元素的技巧。它說，如果你想要中心ul元素沒有寬度，一種方法是把它放在一個表內，並將表格邊界左/右設置爲自動。但表元素本身沒有寬度，爲什麼表可以居中？..爲什麼沒有寬度的表格標籤可以居中

table{ 
 
    margin:0 auto; 
 
}

<table> 
 
    <tbody> 
 
    <tr><td> 
 
\t <ul> 
 
    \t <li><a href="#">1</a></li> 
 
     <li><a href="#">2</a></li> 
 
     <li><a href="#">3</a></li> 
 
    </ul> 
 
    </td></tr> 
 
    </tbody> 
 
</table>

來源

2015-04-06 user3033715

只是一個側面說明，你可以無需額外的HTML實現這一目標：http://jsfiddle.net/dpz6rae2/ – sinisake

我看不出這招如何應用到'ul'元素。它肯定不在這裏：http://jsfiddle.net/4pca9fv4/ –

@RickHitchcock如果你添加一個邊框到表格中，你會看到表格居中。請記住，'ul'具有默認邊距和填充，這表明內容不居中。見http://jsfiddle.net/audetwebdesign/4pca9fv4/1/ –

甲table是塊級元素和默認，它有一個auto寬度，其意味着它將計算縮小的寬度以適合內容。如果內容導致寬度小於表格的包含塊的100％，則將左/右邊距設置爲自動將使表格居中在包含塊中。

如果您指定表格的寬度，則只要指定的寬度小於包含區塊的寬度，以margin: 0 auto爲中心也將工作。

居中UL不使用表

這裏有兩個例子。在第一個中，我指定了一個寬度爲ul。在第二個中，我指定display: table這使得ul的行爲類似於表格元素而不是塊元素。

.ex1 { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    border: 1px dotted gray; 
 
} 
 

 
.ex2 { 
 
    display: table; 
 
    margin: 0 auto; 
 
    border: 1px dotted gray; 
 
}

<h3>Example 1 - Specify a width</h3> 
 
<ul class="ex1"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul> 
 

 
<h3>Example 2 - Use a CSS table</h3> 
 
<ul class="ex2"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

來源

2015-04-06 19:15:29

謝謝先生。但爲什麼我不能只把ul放在一個div中，並將div margin設置爲left/right？所討論的div也是一個塊級元素，它將根據它的內容計算它的寬度。 – user3033715

「ul」的默認寬度是包含塊寬度的100％，因此auto/left的右邊距沒有可見的效果。如果你將'ul'的寬度設置爲50％（或類似），你會看到效果。 –

你的解釋很清楚。非常感謝您的幫助 – user3033715

表格的寬度爲塊級元件膨脹以適應內容（一個無序列表不會）。

作爲替代把ul在一個表，你真的不應該這樣做，因爲它不是語義（除非你真正想要的，當然！一表），您可以設置ul {text-align: center}和ul li {display: block}

ul { 
 
    text-align: center; 
 
} 
 

 
ul li { 
 
    display: block; 
 
}

<ul> 
 
    \t <li><a href="#">1</a></li> 
 
     <li><a href="#">2</a></li> 
 
     <li><a href="#">3</a></li> 
 
</ul>

來源

2015-04-06 19:20:53 br3w5

謝謝先生，你是對的。在我的示例代碼中，我不明白爲什麼我不能將ul放在div中，但必須放在表格中。爲什麼它不會集中在一個div中？ – user3033715

爲什麼沒有寬度的表格標籤可以居中

回答

相關問題