HTML元素在向其添加内容时向下转换

今天，我在做一个名为“Tic Tac Toe”的游戏，其中我使用了以下代码：

let init=（）=>{
常量[…框]=document.getElementsByClassName（'col'）；
让插入=（框，操作）=>{
box.innerHTML='X'；
};
box.forEach（box=>{
box.addEventListener（'单击'，事件=>{
插入（事件目标，1）；
});
box.innerHTML=''；
});
};
window.onload=init（）
*{
框大小：边框框；
保证金：0；
}
.ctn{
高度：300px；
字号：0；
填充：7VH0；
}
.行{
位置：相对位置；
左：50vw；
转换：转换（-50%，0）；
宽度：300px；
高度：100px；
盒影：0 0 1px#000；
}
上校{
填充：0；
字体：800 64pt普通；
宽度：100px；
高度：100px；
显示：内联块；
盒影：0 0 1px#000；
文本对齐：居中；
}

井字过三关

D'>







因为您使用的是
内联块
-添加
垂直对齐：中间至
列
：


let init=（）=>{
常量[…框]=document.getElementsByClassName（'col'）；
让插入=（框，操作）=>{
box.innerHTML='X'；
};
box.forEach（box=>{
box.addEventListener（'单击'，事件=>{
插入（事件目标，1）；
});
box.innerHTML=''；
});
};
window.onload=init（）
*{
框大小：边框框；
保证金：0；
}
.ctn{
高度：300px；
字号：0；
填充：7VH0；
}
.行{
位置：相对位置；
左：50vw；
转换：转换（-50%，0）；
宽度：300px；
高度：100px；
盒影：0 0 1px#000；
}
上校{
填充：0；
字体：800 64pt普通；
宽度：100px；
高度：100px；
显示：内联块；
盒影：0 0 1px#000；
文本对齐：居中；
垂直对齐：中间对齐；
}


D'>







它与字母周围的方框有关，但当该行全部填满时，它就会消失。
垂直对齐：顶部
to col将解决问题：）为了更精确，它应该是与基线/子/超级不同的垂直对齐的任何值。。。在这种情况下，中间、底部和顶部都有效