任何人都可以解释为什么按钮不是绝对定位到右边？我希望它从每个边缘都是3px.
HTML：
<div class="wrapper">
<button>Hello world</button>
</div>
CSS：
.wrapper {
height: 300px;
width: 300px;
background-color: #f33;
position: relative;
}
.wrapper button {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
}
此外,该按钮如何能够垂直对齐其内容？
解决方法
与大多数表单元素一样,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%;
}
<div class="wrapper">
<button>Hello world</button>
</div>
(如果不能使用Box-sizing,请从包装器的尺寸中减去填充.)
文本的垂直对齐可能与浏览器默认情况下绘制按钮控件的方式有关,通常基于系统按钮控件.
