[分享]css中如何设置button居中显示图片

在网页设计过程中，有时候我们需要在button中添加图片。但是默认情况下，图片可能会偏移到button的左上角，影响网页的美观性。那么该如何让button中的图片居中呢？接下来，我们就来介绍一下如何通...

在网页设计过程中，有时候我们需要在button中添加图片。但是默认情况下，图片可能会偏移到button的左上角，影响网页的美观性。那么该如何让button中的图片居中呢？接下来，我们就来介绍一下如何通过css来设置button居中显示图片。
首先，我们需要在html代码中添加button标签和img标签，如下所示：

<br> <br>
<button><br>
    <img src="images/icon.png" alt="icon"><br>
    点击按钮<br>
</button><br> 

这里，我们将图片文件放在images文件夹中，并给img标签添加了alt属性，以提高网站的可访问性。
接下来，我们需要使用css来设置button中的图片居中显示。在css文件中，我们可以使用以下代码：

<br> <br>
button {<br>
    display: flex;<br>
    justify-content: center;<br>
    align-items: center;<br>
}<br>
button img {<br>
    margin: 0 auto;<br>
}<br> 

上述代码的解释如下：
1. display: flex; 将button标签设置为弹性盒子，以便进行布局调整。
2. justify-content: center; 将弹性盒子的主轴居中对齐。
3. align-items: center; 将弹性盒子的交叉轴居中对齐。
4. margin: 0 auto; 将img标签的左右外边距设置为auto，使其相对于button标签水平居中。
通过以上代码设置，我们可以让button中的图片居中显示。当然，我们也可以根据具体情况灵活调整大小和位置。
总之，通过这种方式，在设计网页时，我们不仅可以使网页更加美观，同时也提高了网页的易使用性和可访问性。