React / HTML / CSS текст кнопки не центрируется на мобильном телефоне; прекрасно работает на всех настольных браузерах

Question

Я полностью озадачен этим - приложение представляет собой простой проект React, но кнопка простая HTML со стилем CSS. Текст внутри элемента кнопки, который должен быть центрирован, прекрасно работает во всех браузерах, но все выровнено по правому краю на 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; и других, но единственный способ, который работал для меня на мобильном телефоне, состоял в том, чтобы центрировать иконку, делая кнопку display: flex и justify-content: center.

Answer 2

Попробуйте добавить центр webkit в .opencapsule

text-align: -webkit-center;