html 按钮位置自动,html – 按钮位置绝对不能按预期工作

与大多数表单元素一样,button是一个替换元素.当绝对定位时,替换元素的行为与常规非替换元素(例如div)的行为不同.适用于

section 10.3.8 of CSS2.1的以下两点：

The used value of ‘width’ is determined as for inline replaced elements. If ‘margin-left’ or ‘margin-right’ is specified as ‘auto’ its used value is determined by the rules below.

…

If at this point the values are over-constrained,ignore the value for either ‘left’ (in case the ‘direction’ property of the containing block is ‘rtl’) or ‘right’ (in case ‘direction’ is ‘ltr’) and solve for that value.

与未替换的元素不同,按钮的宽度不是基于指定的偏移量确定的,而是由按钮本身的内容决定的.由于宽度的使用值不是自动的,并且左侧和右侧的指定值不是自动的,因此值过度约束并且强制浏览器向右忽略以便考虑宽度.

如果希望按钮填充包装的整个高度和宽度,请不要使用绝对定位.而是在按钮上指定100％的高度和宽度,并在包装​​器上使用填充来偏移按钮：

.wrapper {

height: 300px;

width: 300px;

background-color: #f33;

padding: 3px;

Box-sizing: border-Box;

}

.wrapper button {

height: 100%;

width: 100%;

}

Hello world

(如果不能使用Box-sizing,请从包装器的尺寸中减去填充.)

文本的垂直对齐可能与浏览器默认情况下绘制按钮控件的方式有关,通常基于系统按钮控件.