Home > Blockchain >  How to center innerHTML in a button?
How to center innerHTML in a button?

Time：01-17

I have a very simple TicTacToe game that works perfectly with Firefox in Fedora but when I use a Chromium based browser or Windows the "X"s and "O"s are misplaced and the font not used.

var c=0
function a(b){
    "X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&0==c?(document.getElementById(b).innerHTML="X",c=1):
    "X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&1==c&&(document.getElementById(b).innerHTML="O",c=0)
    z()
}
function r(b){for(c=0;8>=b;b  )document.getElementById(b).innerHTML=""}
function z(){
    "X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(2).innerHTML?x():
    "X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(5).innerHTML?x():
    "X"==document.getElementById(6).innerHTML&&"X"==document.getElementById(7).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
    "X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
    "X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(7).innerHTML?x():
    "X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(5).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
    "X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
    "X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
    "O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(2).innerHTML?o():
    "O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(5).innerHTML?o():
    "O"==document.getElementById(6).innerHTML&&"O"==document.getElementById(7).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
    "O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(6).innerHTML?o():
    "O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(7).innerHTML?o():
    "O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(5).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
    "O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
    "O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(6).innerHTML&&o()
}
function x(){alert("Ha guanyat X!");c=2}
function o(){alert("Ha guanyat O!");c=2}
body{background-color:#001c5a}
button{
    cursor:pointer;
    font-family:Tahoma;
    font-weight:bolder;
    font-size:xx-large;
}
#s{
    cursor:default;
    margin: 2%;
    color:white
}
#q{
    width:30rem;
    display:flex;
    flex-wrap:wrap;
    border:solid #c1133d
}
#q button{
    display:flex;
    flex-direction:column;
    width:10rem;
    height:10rem;
    padding-top:3.5rem;
    background-color:#84C7D6;
    color:#000;
    border:solid #c1133d
}
#x {
    width:30rem;
    margin: 2%;
    padding:2% 2%;
    background-color:#c1133d;
    color:white;
    border:0;
    border-radius:66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>

I have tried different browsers and operating sistems, it should work but sometimes it does not. Idk why in Windows it does not use the font I want.

Browsers:

  • Firefox
  • Chromium
  • Google Chrome

Solutions (non working):

  • text-align
  • justify-content
  • vertical-align

CodePudding user response：

Tried using display:flex and it worked for me.

var c=0
function a(b){
    "X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&0==c?(document.getElementById(b).innerHTML="X",c=1):
    "X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&1==c&&(document.getElementById(b).innerHTML="O",c=0)
    z()
}
function r(b){for(c=0;8>=b;b  )document.getElementById(b).innerHTML=""}
function z(){
    "X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(2).innerHTML?x():
    "X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(5).innerHTML?x():
    "X"==document.getElementById(6).innerHTML&&"X"==document.getElementById(7).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
    "X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
    "X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(7).innerHTML?x():
    "X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(5).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
    "X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
    "X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
    "O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(2).innerHTML?o():
    "O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(5).innerHTML?o():
    "O"==document.getElementById(6).innerHTML&&"O"==document.getElementById(7).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
    "O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(6).innerHTML?o():
    "O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(7).innerHTML?o():
    "O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(5).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
    "O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
    "O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(6).innerHTML&&o()
}
function x(){alert("Ha guanyat X!");c=2}
function o(){alert("Ha guanyat O!");c=2}
body{background-color:#001c5a}
button{
    cursor:pointer;
    font-family:Tahoma;
    font-weight:bolder;
    font-size:xx-large;
}
#s{
    cursor:default;
    margin: 2%;
    color:white
}
#q{
    width:30rem;
    display:flex;
    flex-wrap:wrap;
    border:solid #c1133d
}
#q button{

    display:flex;
    padding: 0;
    justify-content: center;
    align-content: space-around;
    align-items: center;
    width:10rem;
    height:10rem;
    background-color:#84C7D6;
    color:#000;
    border:solid #c1133d
}
#x {
    width:30rem;
    margin: 2%;
    padding:2% 2%;
    background-color:#c1133d;
    color:white;
    border:0;
    border-radius:66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>

CodePudding user response：

Give the button flexbox style:

button {
  display: flex;
  align-items: center;
  justify-content: center;
}

And remove the top padding.

var c = 0

function a(b) {
  var el = document.getElementById(b);
  "X" != el.innerHTML && "O" != el.innerHTML && 0 == c ? (el.innerHTML = "X", c = 1) :
    "X" != el.innerHTML && "O" != el.innerHTML && 1 == c && (el.innerHTML = "O", c = 0)
  z()
}

function r(b) {
  for (c = 0; 8 >= b; b  ) document.getElementById(b).innerHTML = ""
}

function z() {
  "X" == document.getElementById(0).innerHTML && "X" == document.getElementById(1).innerHTML && "X" == document.getElementById(2).innerHTML ? x() :
    "X" == document.getElementById(3).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(5).innerHTML ? x() :
    "X" == document.getElementById(6).innerHTML && "X" == document.getElementById(7).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
    "X" == document.getElementById(0).innerHTML && "X" == document.getElementById(3).innerHTML && "X" == document.getElementById(6).innerHTML ? x() :
    "X" == document.getElementById(1).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(7).innerHTML ? x() :
    "X" == document.getElementById(2).innerHTML && "X" == document.getElementById(5).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
    "X" == document.getElementById(0).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
    "X" == document.getElementById(2).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(6).innerHTML ? x() :
    "O" == document.getElementById(0).innerHTML && "O" == document.getElementById(1).innerHTML && "O" == document.getElementById(2).innerHTML ? o() :
    "O" == document.getElementById(3).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(5).innerHTML ? o() :
    "O" == document.getElementById(6).innerHTML && "O" == document.getElementById(7).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
    "O" == document.getElementById(0).innerHTML && "O" == document.getElementById(3).innerHTML && "O" == document.getElementById(6).innerHTML ? o() :
    "O" == document.getElementById(1).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(7).innerHTML ? o() :
    "O" == document.getElementById(2).innerHTML && "O" == document.getElementById(5).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
    "O" == document.getElementById(0).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
    "O" == document.getElementById(2).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(6).innerHTML && o()
}

function x() {
  alert("Ha guanyat X!");
  c = 2
}

function o() {
  alert("Ha guanyat O!");
  c = 2
}
body {
  background-color: #001c5a
}

button {
  display: flex;            /* add */
  align-items: center;      /* add */
  justify-content: center;  /* add */
  cursor: pointer;
  font-family: Tahoma;
  font-weight: bolder;
  font-size: xx-large;
}

#s {
  cursor: default;
  margin: 2%;
  color: white
}

#q {
  width: 30rem;
  display: flex;
  flex-wrap: wrap;
  border: solid #c1133d
}

#q button {
  display: flex;
  flex-direction: column;
  width: 10rem;
  height: 10rem;
  /* padding-top: 3.5rem; -- remove */
  background-color: #84C7D6;
  color: #000;
  border: solid #c1133d
}

#x {
  width: 30rem;
  margin: 2%;
  padding: 2% 2%;
  background-color: #c1133d;
  color: white;
  border: 0;
  border-radius: 66px
}
<html>

<head>
  <link rel="stylesheet" href="b.css">
  <script src="c.js"></script>
  <title>3 en ratlla</title>
</head>

<body>
  <center>
    <h1 id="s">A jugar!</h1>
    <div id="q">
      <button id="0" onclick="a(0)"></button>
      <button id="1" onclick="a(1)"></button>
      <button id="2" onclick="a(2)"></button>
      <button id="3" onclick="a(3)"></button>
      <button id="4" onclick="a(4)"></button>
      <button id="5" onclick="a(5)"></button>
      <button id="6" onclick="a(6)"></button>
      <button id="7" onclick="a(7)"></button>
      <button id="8" onclick="a(8)"></button>
    </div>
    <button id="x" onclick="r(0)">Tornar a començar</button>
  </center>
</body>

</html>

Page link：https//www.codepudding.com/Blockchain/674273.html

Prev:"Objects are not valid as a React child" react error
Next:C moving constructor - A tour of C
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding