css 如何将innerHTML放在一个按钮的中心?

wbrvyc0a  于 2023-01-18  发布在  其他
关注(0)|答案(2)|浏览(96)

我有一个非常简单的TicTacToe游戏,可以在Fedora中与Firefox完美配合,但当我使用基于 chrome 的浏览器或Windows时,"X"和"O"放错了位置,字体也没有使用。

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>

我试过不同的浏览器和操作系统,它应该工作,但有时不工作。idk为什么在windows中它不使用我想要的字体。

浏览器:

  • 火狐
  • chrome
  • 谷歌浏览器

溶液(非工作溶液):

  • 文本对齐
  • 正当性内容
  • 垂直对齐
a0zr77ik

a0zr77ik1#

尝试使用display:flex,效果很好。

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>
5vf7fwbs

5vf7fwbs2#

为按钮给予Flexbox样式:

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

把上面的衬垫拿掉。
x一个一个一个一个x一个一个二个一个x一个一个三个一个

相关问题