flex align-items center 不居中

Posted 2023-03-05

【中文标题】flex align-items center 不居中

【英文标题】：flex align-items center is not centering

【发布时间】：2018-07-16 20:20:21

【问题描述】：

我有一个代码 - 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; 似乎可以做到这一点，但它有点偏离，比如

【参考方案1】：

没有任何东西将它们居中（在您的代码笔中）。

将此添加到您的代码中：

.element
    display: flex;
    justify-content: center; /* horizontal alignment */

.element__item 
    display: flex;           /* nested flex container */
    align-items: center;     /* vertical alignment */

revised codepen

【讨论】：

抱歉，我的条款搞混了。我希望块文本垂直对齐，这就是我使用align-items: center; 的原因。在您修改后的代码笔中，块和文本未正确垂直对齐

@ttmt 出于好奇，我的答案已经做到了，并且与 square/text 对齐，除了我发布的内容之外，无法以任何其他方式完成，如果我的没有按照你的意愿做，我错过了什么？

LGSon，我已经用图片更新了问题，可能本来应该这样做

这正是我在原始答案中的内容。您只需要为间距添加边距。 codepen.io/anon/pen/gvwXzE

@ttmt Michael 的最初回答是这样做的，并且对于在浏览器/视口中垂直居中的项目，element 需要一个高度......并将其填充/边距归零：@ 987654323@

【参考方案2】：

要使列表垂直，只需添加“flex-direction”

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

【参考方案3】：

对于水平居中对齐：

.element 
justify-content: center;

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

.element__item-square 
    vertical-align: middle;

.element__item-text 
    vertical-align: middle;

【参考方案4】：

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

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

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