timofeygusevopal
@timofeygusevopal
Учусь

Как вертикально центрировать изображение ::before относительно контента что бы элемент не обтекало текстом?

Надо сделать так что бы в случае добавления контента, картинку не обтекал текст в случае добавления контента и вертикально центрировать.
<section class="block-connect">
            <div class="block-connect__inner">
                <h4>Sign up for out newsletter to receive a handpicked selection of the best stories, recipes, and news,
                    delivered weekly to your inbox.</h4>
                <form class="block-connect__form" action="send">
                    <input type="text">
                    <button type="submit">Subscribe</button>
                </form>
            </div>
        </section>

.block-connect {
  margin-top: 39px;
  padding-left: 18px;
  border-bottom: 1px dashed #E5E5E5;
  border-top: 1px dashed #E5E5E5;
  width: 877px;
  padding-top: 10px;
  padding-bottom: 8px;

  &__inner {
    display: flex;
    width: 876px;
    align-items: center;

    h4 {
      font-family: Arial, serif;
      font-style: italic;
      font-weight: normal;
      font-size: 14px;
      line-height: 16px;
      padding-left: 18px;

      &::before {
        float: left;
        margin: 10px;
        content: "";
        vertical-align: middle;
        width: 37px;
        height: 31px;
        background-repeat: no-repeat;
        display: block;
        background-image: url(https://cdn.icon-icons.com/icons2/2866/PNG/512/yoga_position_pose_icon_181785.png);
      }
    }

    button {
      margin-left: 17px;
      font-size: 10px;
      line-height: 10px;
      padding: 6px 15px 4px;
    }
  }

  &__form {
    padding-left: 21px;
    padding-top: 4px;
    display: flex;

    input {
      width: 157px;
      height: 19px;
    }
  }
}

С моими стилями и имею это
6038e95968e8b149636836.png
И пример кода в песочнице:
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
@cheeroque
Сделать блоку левый паддинг, иконку поставить абсолютом:

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@henrykurbakov
Сделай высоту в vh:

&::before {
        float: left;
        margin: 10px;
        content: "";
        vertical-align: middle;
        width: 37px;
        height: 4vh;
        background-repeat: no-repeat;
        display: block;
        background-image: url(https://cdn.icon-icons.com/icons2/2866/PNG/512/yoga_position_pose_icon_181785.png);
      }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы