Как выровнять картинку по середине текста?

Question

[jastex]

Есть код

<p id="reg">Регистрация будет недоступна через:</p>

#reg {
      color: #878787;
      align-self: center;
      justify-self: center;
      }
      #reg::before {
        content: url("../img/icon.png");
        padding-right: 10px;
        justify-items: center;
      }

Как выровнять иконку по центру текста, а то она чуть выше центра и выглядит не очень

Comments

[Ankhena]

Это justify-items: center; стереть.
Добавить псевдоэлементу:

display: inline-block;
vertical-align: middle

Альтернатива:
задать для p

display: flex;
align-items: center

Но могут быть сюрпризы. если внутри p будут другие теги.

Идея двигать иконку магическими числами, как предлагается в ответе Fructus приведет вас к тому, что при смене иконки или шрифта придется снова подгонять пиксели. При смене шрифта пользователем, все совсем пойдет прахом.

p.s. старайтесь не использовать id для стилизации, лучше классы.

[Ankhena]

Fructus, погуглите, чем это чревато, если выступаете за то, что id это хорошая практика. Надеюсь, измените мнение.

[Ankhena]

Fructus, нет, я могу только ставить или убирать свои

[Ankhena]

Fructus,

Всего лишь огромный код будет у вас )

Действительно, вот беда всего лишь огромный непереиспользуемый код.

Особенное спасибо вам скажут посетители в роуминге при 100килобитной тарификации.

Не говоря про тех, кому такой сайт придется поддерживать после вас.
А также клиент, которого вынудят оплатить не мелкие работы, а полную переверстку.

Ладно, если бы эти потерянные деньги шли вам.. В первом случае вы просто кормите операторов сотовой связи.

Но дальше я вас уговаривать не буду, пишите как хотите.

Answer 1

[danilsn9]

align-items: center;

Comments

[jastex]

Ничего не меняется (

[danilsn9]

jastex, Вы прописали для reg или before? Попробуйте и там и там вставить.

[Lord_Dantes]

jastex, чтобы менялось надо display: flex; поставить, а не просто justify