Javascript React/HTML/CSS按钮文本不以手机为中心；适用于所有桌面浏览器

这个应用程序是一个简单的React项目，但是按钮是带有CSS样式的简单HTML。按钮元素中的文本（应该居中）在所有桌面浏览器上都可以正常工作，但在iPhone上所有内容都是右对齐的。该按钮包括一个图标和一些文本，它们位于不同的行上，但当我删除其中任何一个都不会有什么区别时，问题仍然存在。我没有能力检查手机上的代码，所有在线的桌面iPhone模拟器都没有显示问题。有人知道这是什么原因吗

JavaScript/JSX（状态包含图标和文本）：

当前应用程序的实时版本：

这应该可以修复它：

在按钮元素

.opencapsule

上，添加

显示：flex和
调整内容：中心，如下所示：

.opencapsule {
    margin:0 auto;
    color: white;
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
    line-height: .8rem;
    border-radius: 3px;
    border: 1px solid white;
    background-color: gray;
    cursor: pointer;
    outline: none;
    display: flex;  //add this
    justify-content: center;  //add this
}

我不完全确定为什么图标没有集中在手机上，这与
的行为有关。我在iphone上尝试了很多其他方法，比如，
text align:center和
页边距：自动
和其他，但对我来说，在手机上唯一有效的方法是通过使按钮
显示：flex
和
调整内容：中心来居中图标，尝试将webkit中心添加到.opencapsule

text-align: -webkit-center;

见下面我的答案。我的答案对你有用吗？就是这样，谢谢！出于某种原因，我没有想到在按钮中使用flex。
.opencapsule {
    margin:0 auto;
    color: white;
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
    line-height: .8rem;
    border-radius: 3px;
    border: 1px solid white;
    background-color: gray;
    cursor: pointer;
    outline: none;
    display: flex;  //add this
    justify-content: center;  //add this
}

text-align: -webkit-center;