如何在按钮内居中对齐图标？

在按钮内居中对齐图标的方法有多种，以下是其中几种常见的方式：

使用CSS的flex布局：通过设置按钮容器的display属性为flex，并使用justify-content和align-items属性将图标在容器中水平和垂直居中对齐。示例代码如下：

<style>
    .button-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="button-container">
    <button>
        <img src="icon.png" alt="图标">
    </button>
</div>

使用CSS的position属性：通过将图标的position属性设置为absolute，并使用top、left、right、bottom属性将图标相对于按钮容器进行定位。示例代码如下：

<style>
    .button-container {
        position: relative;
    }
    
    .button-container img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<div class="button-container">
    <button>
        <img src="icon.png" alt="图标">
    </button>
</div>

使用CSS的text-align属性：通过将按钮容器的text-align属性设置为center，将图标的display属性设置为inline-block，可以实现图标在按钮内水平居中对齐。示例代码如下：

<style>
    .button-container {
        text-align: center;
    }
    
    .button-container img {
        display: inline-block;
    }
</style>

<div class="button-container">
    <button>
        <img src="icon.png" alt="图标">
    </button>
</div>

以上是几种常见的在按钮内居中对齐图标的方法，具体选择哪种方法取决于具体的需求和布局。