CSS按鈕怎么做在中間?
要使CSS創建的按鈕在頁面中間,需要使用一些CSS技巧。在這篇文章中,我們將探索如何將按鈕居中。
首先,創建一個按鈕的HTML代碼和CSS樣式。這里使用一個簡單的例子:
HTML:CSS:
.center {
margin: 0 auto;
display: block;
}
在上面的代碼中,`margin: 0 auto`是用來使按鈕水平居中的關鍵。`display: block`則是將按鈕變為塊級元素,以便可以適當調整其位置。
另一個方法是使用Flexbox。在父元素中,設置CSS `display: flex; justify-content: center; align-items: center;`。這將使子元素(即按鈕)水平和垂直居中。HTML:CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center {
display: block;
}
在上面的代碼中,`height: 100vh`是指示父元素(即`container`)要占據整個視口高度。這將確保按鈕始終垂直居中。
以上是兩種常見的方法,可以使用它們來使CSS按鈕在中間呈現。希望這篇文章對您有所幫助!上一篇css按鈕文字替換
下一篇gulp css 兼容