[分享]css3按钮水平居中

在网站设计中，按钮是一个非常重要的元素。而居中排列这个功能也是我们经常需要使用的。今天我们就来讲解一下如何使用CSS3来水平居中按钮。 首先，我们需要一个HTML文件，里面包含一个按钮的代码，如下所示...

在网站设计中，按钮是一个非常重要的元素。而居中排列这个功能也是我们经常需要使用的。今天我们就来讲解一下如何使用CSS3来水平居中按钮。 首先，我们需要一个HTML文件，里面包含一个按钮的代码，如下所示：

按钮

接着，我们需要给按钮添加样式。代码如下所示：

button {
  background-color: #4CAF50; // 按钮背景色
  border: none; // 去掉边框
  color: white; // 按钮字体颜色
  padding: 15px 32px; // 设置内边距
  text-align: center; // 居中文本
  text-decoration: none; // 去掉下划线
  display: inline-block; // 改变按钮的行内表现方式
  font-size: 16px; // 设置字体大小
  margin-top: 20px; // 设置按钮与上面元素的距离
} 

上述代码中，我们给按钮设置了一些基础样式，如背景颜色、边框、内边距、字体颜色等。我们需要注意的是，按钮要设置为`inline-block`，这是因为默认情况下，按钮是个`inline`元素，这样设置的话按钮的宽度会自适应内容的宽度，不符合我们的需求。 接着，我们就可以使用CSS3的`text-align`属性来让按钮水平居中了。代码如下所示：

p {
  text-align: center; // 让按钮所在的p标签中的内容水平居中
} 

上述代码中，我们给p标签添加了一个`text-align`属性，将按钮所在的p标签中的内容水平居中。 最终的代码如下所示：

按钮

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 20px;
}

p {
  text-align: center;
} 

这样，我们就可以轻松实现按钮的水平居中了。希望本文能够对大家有所帮助。