Question

我对此完全感到困惑-该应用程序是一个简单的React项目，但是按钮是带有CSS样式的简单HTML。 button元素内的文本-应该居中-在所有台式机浏览器上都可以正常工作，但是在iPhone上所有内容都右对齐。该按钮包括一个FontAwesome图标和一些文本，它们在不同的行上，但是当我删除其中的任何一个都没有影响时，问题仍然存在。我没有能力检查手机上的代码，并且所有在线桌面iPhone仿真器都没有显示问题。有谁知道这是什么原因造成的？

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

<div className='textcontainer'>
     <button disabled={this.state.disabled} 
           onClick={e => this.handleOpen(this.props.id)} 
           className='opencapsule' 
           id={this.props.title + '_button'}>
           {this.state.clock}
           <span className='opentext'> {this.state.status}</span>
      </button>
</div>

相关CSS：


.textcontainer {
    padding: 5px;
    display: 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;
}

.opentext {
    font-size: .8rem;
    line-height: 1rem;
}

当前应用的实时版本：https://timecapsule.now.sh/capsules

Answer 1

这应该解决它：

在按钮元素.opencapsule上，添加display: flex;和justify-content: center;，如下所示：

.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
}

我不太确定为什么图标没有集中在移动设备上，这与<svg>的行为有关。我尝试了许多其他方法来将其居中放置在iPhone上，例如text-align: center;和margin: auto;等，但是对我来说，在移动设备上唯一可行的方法是通过使按钮{{ 1}}和display: flex。

Answer 2

尝试将Webkit中心添加到.opencapsule

text-align: -webkit-center;

React / HTML / CSS按钮文本不在移动设备上居中；在所有桌面浏览器上都可以正常工作

2 个答案: