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

Question

我的目标是制作一款井字游戏，但我在垂直和水平对齐 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，尝试不同的属性、值、文本类型、显示类型），但我无法通过它看起来像这样：

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

Answer 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。

Answer 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>

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

Vertically aligning text for game grid not working in flex-box

html

css

flexbox

vertical-alignment