Как выровнить элементы? (flex)

Question

Пытаюсь выровнить элементы по центру относительно зеленого блока (.ask), но почему-то li height, охватывает не всю его высоту, из-за этого элементы выравниваются криво, как починить?

* {
  list-style: none;
}

.ask {
  background-color: #132616;
  height: 200px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.ask ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.ask ul .ask__comment {
  width: 40px;
  font-size: 1.3rem;
  height: 40px;
  background: #00aab8;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 20px;
}

.ask ul .ask__comment p {
  height: auto;
  font-weight: bold;
}

.ask ul .ask__comment span {
  font-size: .8rem;
  color: #c6c6c6;
}

.ask ul .ask__like {
  width: 40px;
  font-size: 1.3rem;
  height: 40px;
  background: #ee4c22;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}

.ask ul .ask__like p {
  font-weight: bold;
  height: auto;
}

.ask ul .ask__like span {
  font-size: .8rem;
  color: #c6c6c6;
}

.ask .ask__button {
  width: 200px;
  height: 50px;
  background: #ee1144;
  border: none;
  color: #fff;
  font-family: Roboto;
  border-radius: 50px;
  box-shadow: 0px 0px 50px #30303021;
  font-weight: bold;
  -webkit-transition: .2s all;
  transition: .2s all;
}

.ask .ask__button:hover {
  cursor: pointer;
  background-color: #c51c44;
}

<div class="ask">
  <ul>
    <li>
      <div class="ask__comment">
        <p>1</p>
        <span>Посты</span>
      </div>
    </li>

    <li>
      <div class="ask__like">
        <p>1</p>
        <span>Лайки</span>
      </div>
    </li>
  </ul>
</div>

Answer 1

Правильно понимаю, так?

* {
  list-style: none;
}

.ask {
  background-color: #132616;
  height: 200px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.ask ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.ask ul .ask__comment {
  width: 40px;
  font-size: 1.3rem;
  height: 40px;
  background: #00aab8;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 20px;
}

.ask ul .ask__comment p {
  height: auto;
  line-height: 40px;
  font-weight: bold;
  margin: 0;
}

.ask ul .ask__comment span {
  font-size: .8rem;
  color: #c6c6c6;
}

.ask ul .ask__like {
  width: 40px;
  font-size: 1.3rem;
  height: 40px;
  background: #ee4c22;
  text-align: center;
  border-radius: 50%;
  color: #fff;
}

.ask ul .ask__like p {
  font-weight: bold;
  height: auto;
  line-height: 40px;
  margin: 0;
}

.ask ul .ask__like span {
  font-size: .8rem;
  color: #c6c6c6;
}

.ask .ask__button {
  width: 200px;
  height: 50px;
  background: #ee1144;
  border: none;
  color: #fff;
  font-family: Roboto;
  border-radius: 50px;
  box-shadow: 0px 0px 50px #30303021;
  font-weight: bold;
  -webkit-transition: .2s all;
  transition: .2s all;
}

.ask .ask__button:hover {
  cursor: pointer;
  background-color: #c51c44;
}

<div class="ask">
  <ul>
    <li>
      <div class="ask__comment">
        <p>1</p>
        <span>Посты</span>
      </div>
    </li>

    <li>
      <div class="ask__like">
        <p>1</p>
        <span>Лайки</span>
      </div>
    </li>
  </ul>
</div>

Answer 2

Можно так сделать

* {
  list-style: none;
}

.ask {
  background-color: #132616;
  height: 200px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.ask p {
  margin: 0;
}

.ask ul {
  display: -webkit-box;
  display: flex;
  margin: 0;
  margin-left: 20px;
  padding: 0;
}

.ask ul .ask__elem span {
  font-size: .8rem;
  color: #c6c6c6;
}

.ask ul .ask__elem p {
  font-weight: bold;
}

.ask .ask__button {
  width: 200px;
  height: 50px;
  background: #ee1144;
  border: none;
  color: #fff;
  font-family: Roboto;
  border-radius: 50px;
  box-shadow: 0px 0px 50px #30303021;
  font-weight: bold;
  -webkit-transition: .2s all;
  transition: .2s all;
}

.ask .ask__button:hover {
  cursor: pointer;
  background-color: #c51c44;
}

.ask__elem {
  text-align: center;
  width: 40px;
}

.ask__elem span {
  text-align: center;
  display: block;
  margin-top: 5px;
}

.ask__elem p {
  width: 40px;
  font-size: 1.3rem;
  height: 40px;
  background: #ee4c22;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ask__comment {
  margin-right: 10px;
}

.ask__comment p {
  background: #00aab8;
}

<div class="ask">
  <ul>
    <li>
      <div class="ask__elem ask__comment">
        <p>1</p>
        <span>Посты</span>
      </div>
    </li>

    <li>
      <div class="ask__elem ask__like">
        <p>1</p>
        <span>Лайки</span>
      </div>
    </li>
  </ul>
</div>

БЛОГ НА HUSL

Как выровнить элементы? (flex)

Ответы (2 шт):