游戏网格的垂直对齐文本在 flex-box 中不起作用

Posted 2023-03-05

【中文标题】游戏网格的垂直对齐文本在 flex-box 中不起作用

【英文标题】：Vertically aligning text for game grid not working in flex-box

【发布时间】：2022-01-04 20:28:27

【问题描述】：

我的目标是制作井字游戏，但我在垂直和水平对齐 x 和 o 标记时遇到了很多困难。

这是我的代码，其中“标记”的值是带有字母的值：

ul 
  display: flex;
  flex-wrap: wrap;
  width: 456px;
  list-style: none;
  padding-inline-start: 0;


li 
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;


li:hover 
  background-color: yellow;


figure 
  display: flex;
  justify-content: center;


.marked 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10em;

<h1>Tic Tac Toe</h1>
<figure class="ttt">
  <ul>
    <li class="marked">o</li>
    <li class="marked">x</li>
    <li class="marked">o</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</figure>

我尝试了很多对齐文本的变体（使用 div，尝试不同的属性、值、文​​本类型、显示类型），但我无法让它看起来像这样：

如您所见，它垂直偏离中心。我认为水平方向还可以，但同样，它似乎可能不是像素完美的。我已经在这几个小时了，所以我很感激任何建议！

【问题讨论】：

下次请把你的代码合并到同一个sn-p中。 sn-p 的全部原因是运行/解析。但是，如果您将代码拆分为单独的 sn-ps，这将不起作用。

您的元素垂直居中。但是，您不使用大写字母，而是使用小写字母。因此，它们不会填充整个行高。请改用大写字母或符号。

【参考方案1】：

您可以在<li> 元素上放置line-height 来垂直对齐文本，并使用text-align: center; 来水平对齐文本。

ul 
  display: flex;
  flex-wrap: wrap;
  width: 456px;
  list-style: none;
  padding-inline-start: 0;


li 
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: gray;
  /* HERE */
  text-align: center;
  line-height: 125px;


li:hover 
  background-color: yellow;


figure 
  display: flex;
  justify-content: center;


.marked 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10em;

<h1>Tic Tac Toe</h1>
<figure class="ttt">
  <ul>
    <li class="marked">o</li>
    <li class="marked">x</li>
    <li class="marked">o</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</figure>

PS：如果您希望它在不同的屏幕尺寸上看起来不错，您可能应该将px 换成百分比值。如果您有兴趣，请查看this article on the topic。

【参考方案2】：

看看这个。

我为li 样式添加了text-transform: uppercase，并为.marked 略微减少了font-size。

问题似乎是您对齐大写字母，但使用小写。

ul 
  display: flex;
  flex-wrap: wrap;
  width: 456px;
  list-style: none;
  padding-inline-start: 0;


li 
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;


li:hover 
  background-color: yellow;


figure 
  display: flex;
  justify-content: center;


.marked 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5em;

<h1>Tic Tac Toe</h1>
<figure class="ttt">
  <ul>
    <li class="marked">o</li>
    <li class="marked">x</li>
    <li class="marked">o</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</figure>