html - flex align-items 中心不居中

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

没有任何东西使它们居中(在您的代码笔中)。

将此添加到您的代码中:

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

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

revised codepen