为什么我必须将左右设置为0才能使控件水平居中？ [英] Why do I have to set left and right to 0 in order to horizontally center a control?

问题描述

我使用CSS如下：

  .center 
 {
 width：30％ ; 
 position：absolute; 
 margin-left：auto; 
 margin-right：auto; 
 display：block; 
 height：100％; 
 text-decoration：none; 
 overflow：hidden; 
 right：0; 
 left：0; 
} 
  

如果没有

  right：0; 
 left：0; 
  

（我发现一个注释中的解决方案这里）

为什么？

解决方案

好吧，请跟我来...这整个事情都与视觉格式模型，特别是计算宽度和边距的方式。

有几个事情需要考虑，如 display 和 position （这可以全部请参见 CSS规范的第10.3节）。

对于你的情况，我们正在谈论绝对定位的非替换元素（因为它不是一个图像或任何内在大小），所以它的 10.3.7绝对定位的，未替换的元素。 / p>

根据你的css，你有一个定义的宽度，所以不要 auto ，你的左右边距 auto 。所以，它归结为左/右值：

如果定义了左/右，因此不自动，以下规则适用：

如果'margin-left'和'margin-right'都是'auto'，则在额外约束下求解方程， （...）

如果未定义左/右，则默认为 auto ，以下规则适用：

第一个：

< （...）

第二个：

< 正确到静态位置。然后求解'left'（if'direction is'rtl'）或'right'（如果'direction'是'ltr'）。

所以你可以看到，如果你没有为左/右定义一个特定的值，你的边距实际上变成 0 ，你最终有div或者在容器的右边，取决于 direction 属性的值（你可以通过放置像 html {direction：rtl;} 在您的css，div应该向右而不是左边当左/右是自动）

但是如果你指定

希望它有帮助！

I'm using CSS as follows:

.center
{
    width: 30%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
    right:0;
    left:0;
}

It doesn't work without the

right:0;
left:0;

(I found that solution in a comment here)

Why?

解决方案

Okay, so bear with me... this whole thing has to do with the Visual formatting model, in particular with the way in which widths and margins are calculated.

There are several things that need to be taken into account, like display and position (which can all be seen on section 10.3 of the CSS spec).

For your case in particular we are talking about absolutely positioned non-replaced elements (since it is not an image or anything with intrinsic size), so it's section 10.3.7 Absolutely positioned, non-replaced elements.

According to your css, you have a defined width, so not auto, and both your left and right margins are auto. So it boils down to what are the left/right values:

If left/right are defined, so not auto, the following rule applies:

If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values (...)

If left/right are not defined, so they default to auto, the following rules apply:

First:

set 'auto' values for 'margin-left' and 'margin-right' to 0 (...)

Second:

if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').

So you can see that if you do not define a specific value for left/right, your margins actually become 0 and you end up having the div either to the left or to the right of the container depending on the value of the direction property (you can test this by putting something like html { direction:rtl; } on your css, the div should go to the right instead of the left when left/right are auto)

However if you do specify the values, in your case 0, the "two margins get equal values" effectively centers the elemement.

Hope it helps!

这篇关于为什么我必须将左右设置为0才能使控件水平居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！