flex align-items center不居中

Question

我有一个代码 - https://codepen.io/anon/pen/MQjpBG

这是一个简单的列表，每个li中都带有彩色块和文本

我需要列表是垂直的，文本和块要垂直对齐。

我正在尝试使用flex和align-items执行此操作，但文本和块永远不会完全居中

我做错了什么，有没有更好的方法来做到这一点。

.element{
  display: flex;
  list-style: none;

  &__item{
    display: flex;
    align-items: center;
    margin-right: 10px;

    &:last-of-type{
      margin-right: 0;
    }

    &-square{
      background: red;
      //display: block;
      display: inline-block;
      height: 20px;
      width: 20px;
    }

    &-text{
      font-weight: bold;
    }

  }

}

我希望块和文本适合这样。

align-items: center;似乎是这样做的，但稍微偏离了，就像

一样

Answer 1

没有任何内容（在您的代码中）。

将此添加到您的代码中：

Invalid block tag on line 35: 'image', expected 'elif', 'else' or 'endif'. Did you forget to register or load this tag?

revised codepen

Answer 2

要使列表垂直，只需添加＆＃34; flex-direction＆＃34;

  display: flex;
  list-style: none;
  flex-direction: column;

Answer 3

对于水平居中对齐：

.element {
justify-content: center;
}

对于正方形和文本的垂直中心对齐：

.element__item-square {
    vertical-align: middle;
}
.element__item-text {
    vertical-align: middle;
}

Answer 4

不幸的是，问题似乎与所选字体有关。不同的字体将有不同的下行高度（例如“g”的尾部）以及基线相对于全文框的不同位置，并且似乎某些字体将这些值设置为它们可能不是以视觉为中心。

我修改了您的 CodePen 示例并强行将第一个元素的 font-family 设置为 Arial，而将第二个元素保留为默认值（在 macOS 10.15/Catalina 上的 Firefox 上），并且 Arial 版本确实看起来更加垂直居中:

您可以通过更改所使用的字体来解决此问题，但显然这不是可以在大型代码库上轻松进行的更改。