[分享]css做好的按钮怎么设置居中

在网页设计中，按钮的作用非常重要，可以帮助用户更自然地进行操作。而如何制作一个美观且居中的按钮呢？这篇文章将介绍一下如何使用CSS来设置按钮的居中。首先需要创建一个按钮，可以使用HTML的button...

在网页设计中，按钮的作用非常重要，可以帮助用户更自然地进行操作。而如何制作一个美观且居中的按钮呢？这篇文章将介绍一下如何使用CSS来设置按钮的居中。

首先需要创建一个按钮，可以使用HTML的button标签，代码如下：

<button>按钮</button> 

接下来就需要使用CSS来对按钮进行美化和居中设置。

首先需要对按钮进行样式设置：

button {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
} 

这里设置了按钮的背景色、边框、文字颜色、内边距、文字居中、行内块显示、字体大小、外边距和鼠标样式。

接下来就是居中设置了，可以使用以下两种方式来实现：

一种是使用HTML的div标签把按钮包含起来，并设置div的text-align属性为center：

<div style="text-align:center;">
  <button>按钮</button>
</div> 

另一种是直接对按钮进行设置，将其display属性设置为block，并设置margin属性为auto：

button {
  display:block;
  margin:auto;
} 

这里需要注意的是，使用第二种方式时，需要对原来设置的display属性进行覆盖，否则可能会影响到按钮的其他设置。

到这里，一个美观且居中的按钮就制作完成了，对于网页设计来说是非常实用的一种效果。