Как выровнять картинку и текст, чтобы они были на одной линии?

Question

[KrotKrotKrotTest]

Подскажите, как мне можно сделать картинку на одной строчке с иконкой, а если текст был в две строчки, то иконка выравнивалась по верхнему краю?

<li class="search__list-item" style="cursor: pointer;" onclick="displayNames('Поиск')"><b class="strong"> Поиск</b> Текст</li>

.list-item{
    padding: 12px 14px;
    display: inline-block;
    text-align: left;
    &:hover{
      background-color: $sky;
    }
    &:before{
    content: '';
    background-image: url('img/ico.svg');
    background-repeat: no-repeat;
    display: inline-block;
    width: 30px;
    height: 30px;
  }
}

Comments

[Ankhena]

Возможно, вам повезет: вы сделаете отступ чтобы псевдо попал на середину первой строки (удобно через calc, em с учетом размера шрифта и line-height), то будет хорошо смотреться и при нескольких строках.
А если не повезет, то на js выяснять сколько строк и в зависимости от этого задавать разные классы-модификаторы.

[wadowad]

Задайте для .list-item либо display: flex, либо display: inline-flex. Далее смотрите в сторону выравнивания дочерних флекс-элементов попутно поправляя отступами.

[Сергей delphinpro]

Ankhena, как-то сложно. или я не понял о чём речь..

[Ankhena]

Сергей delphinpro, это было на случай, если иконка маленькая и должна быть по центру одной строки и по верху блока, если строк много.

Answer 1

[Сергей delphinpro]

Например, так