Пытаюсь выровнить элементы по центру относительно зеленого блока (.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>