如何将两个元素水平居中，第一个居中，第二个居中？

Question

当第一个元素（span）居中并且第二个（button）位于居中元素的右侧时，我想实现图片中的效果。

这是我的代码。我尝试将span居中，但是它不会影响结果。

<td mat-cell *matCellDef="let element">
    <span>text</span>
    <button>
        <mat-icon>icon</mat-icon>
    </button>
</td>