CSS自動居中,必須對對象設置寬度才能生效。但是如果不對button設置寬度,加上以下CSS樣式,button也可以自動水平居中:
button {
display: block;
margin: 0px auto;
}
對照button的默認樣式如下:
padding: 1px 6px;
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
-webkit-writing-mode: horizontal-tb !important;
-webkit-appearance: button;
如果對其他對象,添加以上CSS代碼,卻無法自動水平居中:
a {
padding: 1px 6px;
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
-webkit-writing-mode: horizontal-tb !important;
-webkit-appearance: button;
display: block;
margin: 0px auto;
}
據此推測,button標籤應該自帶了不可見的寬度屬性。