css按钮怎样居中对齐

时间：2026-01-31 15:54:57

使用CSS按钮居中对齐并不困难，下面通过实例演示。
首先，我们先在HTML文件中加入一个按钮：

<button >Click Me!</button>

然后，我们在CSS文件中设置该按钮样式并使其居中对齐：

.centered-btn {display: block;  /* 将按钮变为块级元素 */margin: auto;    /* 自动居中对齐 */border: 1px solid blue;  /* 给按钮添加边框，方便查看居中效果 */}

解释一下代码：
- display: block; 将按钮变为块级元素，设置其宽度为100%。
- margin: auto; 设置左右外边距为auto，使其自动居中对齐。
- border: 1px solid blue; 是为了方便查看居中效果，可以根据需要修改。
最后，再加上一句代码将按钮的字体大小设置为16px：

.centered-btn {display: block;margin: auto;border: 1px solid blue;font-size: 16px; /* 设置按钮字体大小 */}

这样我们就成功地将按钮居中对齐了。完整代码如下：

<!DOCTYPE html><html><head><title>Centered Button</title><style>.centered-btn {display: block;margin: auto;border: 1px solid blue;font-size: 16px;}</style></head><body><button >Click Me!</button></body></html>

以上就是CSS按钮居中对齐的方法，您可以根据自己的需求进行调整。
上一篇：javascript中函数的主要作用
下一篇：javascript中写java