2

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

2 ответа 2

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>

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.