Кнопка, перемещающаяся при вводе шрифта

Question

У меня есть 9 кнопок, выстроившихся в линию для платы tic tac toe. Если я добавлю X или O в качестве текста для любой из кнопок, вся кнопка перемещается вверх в firefox и вниз в chrome/safari. Любые идеи почему? Кажется, это просто, но я потратил немало времени, пытаясь исправить это.

Пример https://jsfiddle.net/fo4vyd24/

/*////////////////////////////////////// 
 
    \t UNIVERSAL 
 
    //////////////////////////////////////*/ 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    font-weight: normal; 
 
    text-decoration: none; 
 
    box-sizing: border-box; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-weight: normal; 
 
} 
 
img, 
 
video { 
 
    max-width: 100%; 
 
} 
 
input, 
 
button, 
 
select, 
 
submit { 
 
    border: none; 
 
} 
 
/*////////////////////////////////////// 
 
    \t TIC TAC TOE 
 
    //////////////////////////////////////*/ 
 

 
.players, 
 
.ttt-board, 
 
.scoreboard { 
 
    width: 33%; 
 
    float: left; 
 
} 
 
.btn { 
 
    height: 80px; 
 
    width: 80px; 
 
    margin: 5px; 
 
    border-radius: 5px; 
 
    -webkit-box-shadow: 0px 0px 4px 4px rgba(122, 122, 122, 1); 
 
    -moz-box-shadow: 0px 0px 4px 4px rgba(122, 122, 122, 1); 
 
    box-shadow: 0px 0px 4px 4px rgba(122, 122, 122, 1); 
 
} 
 
.x, 
 
.o { 
 
    font-size: 64px; 
 
}

<div class="ttt-board"> 
 
    <section class="top-row"> 
 
    <button class="tp-left btn" value=" "></button> 
 
    <button class="tp-mid btn" value=" "></button> 
 
    <button class="tp-right btn" value=" "></button> 
 
    </section> 
 

 
    <section class="mid-row"> 
 
    <button class="md-left btn" value=" "><span class="x">x</span> 
 
    </button> 
 
    <button class="md-mid btn" value=" "><span class="o">o</span> 
 
    </button> 
 
    <button class="md-right btn" value=" "></button> 
 
    </section> 
 

 
    <section class="bottom-row"> 
 
    <button class="bm-left btn" value=" "></button> 
 
    <button class="bm-mid btn" value=" "></button> 
 
    <button class="bm-right btn" value=" "></button> 
 
    </section> 
 
</div>

Answer 1

Вы должны попробовать следующее в .x, .о класс

position:absolute; 
transform: translateX(-50%); 

Вот jsfiddle, чтобы увидеть его работу.