为什么没有宽度的表格标签可以居中

我正在阅读中心元素的技巧。它说，如果你想要中心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

为什么没有宽度的表格标签可以居中

回答

相关问题