stackoom
  简体   繁体   中英

How to center innerHTML in a button?

 原文  2023-01-16 17:12:42  6   2    javascript/ html/ css/ cross-browser

Question

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

2 answers

solution1
 1  2023-01-16 17:20:18

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>

solution2
 0  2023-01-16 17:28:06

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to center javascript innerHtml How to hide a button with .innerHTML? How to center a button on a page How to copy the innerHtml results using copy button How to append innerHTML of a button on Ember.view Javascript: How to get innerHTML of clicked button How to center a button in Javascript How to change innerHTML of an innerHTML How to Center a button using Bootstrap? how to center datepicker calendar button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM