jeff64 jeff64 - 2 months ago 7
CSS Question

Button moving when font is inputted

I have 9 buttons lined up for a tic tac toe board. If I add an X or O as the text for any of the buttons the entire button moves up in firefox and down in chrome/safari. Any ideas why? Seems like an easy one but I've spent quite a while trying to fix it.

An example https://jsfiddle.net/fo4vyd24/



/*//////////////////////////////////////
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;
}
/*//////////////////////////////////////
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

You should try the following in the .x,.o class

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

Here is a jsfiddle to see it working.

Comments