尝试使用CSS（flexbox）垂直对齐文本

Question

我总是卡在垂直对齐的文本上，今天我对如何在需要设置样式的转盘中实现这一功能有很大的阻碍。

以下是我要执行的操作的一个示例：https://codepen.io/rachel-wallis/pen/PooYVJb

这是我的SCSS

#page {
  text-align:center;
  font-family: sans-serif;

    .case {
      width: 200px;
      border-radius: 0.3em;
      color: white;
      background-color: grey;
      margin: 0 auto;


              app-dashboard-case {
                  width: 100%;
              }

              .selector {
                      padding: 0;
                      display: flex;

                      .selector-previous, .selector-next {
                          border-radius: 1rem 0 0 1rem;
                          max-width: 1rem;
                          min-height: 6.5rem;
                          line-height: 6.5rem;
                          cursor: pointer;
                          justify-content: center;
                          padding: 0;

                        &:hover {
                          background-color: darken(grey,10%);
                        }

                          fa-icon {
                              font-size: 3em;
                          }
                      }

                      .selector-next {
                          border-radius: 0 1rem 1rem 0;
                      }

                .selector-middle {
                  padding: 10px;
                  text-align: left;
                     div {margin-bottom: 0.5em;}
                }
          }
  }
}

如何获得每个元素垂直中间的文本和箭头？

Answer 1

更改“ .selector-previous，.selector-next”的样式

.selector-previous, .selector-next {
                      border-radius: 1rem 0 0 1rem;
                      max-width: 1rem;
                      cursor: pointer;
                      justify-content: center;
                      padding: 0;
                      align-content: center;
                      display: flex;
                      flex-direction: column;