CSS中,按鈕是網頁設計中常用的元素。而如何讓按鈕居中,是很多初學者需要掌握的基礎技能。
button { display: block; margin: auto; }
上述代碼中,“display: block”會將按鈕設置為塊級元素,使其可以設置“margin: auto”。在按鈕寬度確定的情況下,這樣設置可以讓按鈕水平居中。
如果按鈕寬度未知,則可以用以下代碼實現按鈕居中:
button { display: inline-block; margin: 0 auto; text-align: center; }
以上代碼中,“display: inline-block”將按鈕設置為內聯塊級元素,使其可以使用“margin: 0 auto”實現水平居中,而“text-align: center”則實現了按鈕內容的居中顯示。需要注意的是,內聯塊級元素的垂直對齊方式默認是基線對齊,如果需要垂直方向居中,可以設置“vertical-align: middle;”。
總之,按鈕居中的方式有很多種,要根據實際情況選擇合適的代碼實現。