HTML与CSS：巧用Flexbox和Grid布局让按钮上下左右居中！

在HTML和CSS中，你可以使用Flexbox或者Grid布局来实现按钮的上下左右居中。以下是一个简单的例子： 1. 使用Flexbox： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 视口高度 */ } .button-container { width: 200px; /* 按钮宽度 */ } .button { background-color: #4CAF50; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="button-container"> <button class="button">Button</button> </div> </div> </body> </html> ``` 2. 使用Grid布局： ```html <!DOCTYPE html> <html> <head> <style> .container { display: grid; place-items: center; /* 上下左右居中 */ height: 100vh; width: 100vw; /* 视口宽度 */ } .button-container { display: flex; /* 如果需要按钮水平居中，可以去掉这行 */ } .button { background-color: #4CAF50; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="button-container"> <button class="button">Button</button> </div> </div> </body> </html> ``` 这两个例子都会使按钮在容器内上下左右居中显示。如果你需要按钮在父元素内部水平居中，可以去掉Grid布局中的`place-items: center`，并在`.button-container`上添加`display: flex; justify-content: center;`。 ######[AI写代码神器 | 481点数解答 | 2024-05-04 15:18:44]

服务商

更多选项

快捷项

自定义