在網頁中,兩個按鈕的居中是常見的需求。下面介紹兩種方式實現按鈕居中的CSS代碼。
.btn-box{ display: flex; justify-content: center; } .btn{ margin: 0 10px; }
解析:
首先,創建一個按鈕容器,使用Flexbox布局,設置水平對齊方式為居中。
然后,為按鈕設置左右間距,使其與其他內容分開。
.btn-box{ text-align: center; } .btn{ display: inline-block; margin: 0 10px; }
解析:
同樣地,創建一個按鈕容器,并將其文本對齊設置為居中。
為按鈕設置顯示方式為inline-block,使其水平排列,并為其設置左右間距。
以上兩個方式均可實現按鈕的居中。根據實際情況選擇合適的方式,即可得到滿意的效果。