Как выровнять before внутри div?

Question

[Роман]

Родительским ссылкам добавил кнопки "развернуть" - https://npmarket.ru/

Всё просто, сделал див... внутри дива- псевдоэлемент из библиотеки awesome.

Получается довольно забавная хрень, в то время как у одних дивов псевдоэлемент выровнялся, у других - съезжает. Всё 100% идентично, только у соседнего тега разное кол-во букв (ссылки меню).

Если родительский див, внутри которого псевдоэелемент, позиционировать не relative, a absolute - всё выравнивается. Однако этот способ мне не подходит, так как - нужно чтобы данные кнопочки были рядом с текстом.

Почему съезжает before при позиционировании relative?

Пруф -- jpegshare.net/images/3f/c3/3fc31d5abe69f5beb6b5ff1...

Comments

[Pavel Karinin]

Роман. А зачем вы в принципе для стрелки использовали псевдо-элемент? Почему нельзя было ее просто в элемент "засунуть" и выравнивать проще.

я имею ввиду так:

<div class="dcjq-icon" title="Развернуть подкатегории">&#xf078</div>

[Роман]

Pavel Karinin, на автомате... Про этот вариант я совсем забыл. Сейчас попробую!

Answer 1

[Антон Спирин]

Элементарно:

:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Comments

[Pavel Karinin]

Меня всегда удивляло, как народ усложняет себе жизнь))

[Роман]

К сожалению, ни 1 ни 2 варианты не решают проблему. У некоторых пунктов меню всё равно появляется смещение на 1 пиксель. Да и дело - не в красоте кода, просто из принципа интересно - что смещает элементы, ведь там 7 элементов, смещается 2 из них, всё абсолютно одинаково.

[Антон Спирин]

Роман, у вас видимо какой-то особый глазомер или вы проблему не там ищите.
Вот ваши кнопки с кодом из моего ответа:

Я не вижу смещения, да его и быть не должно. То, что я кнопки выстроил по правому краю не обращайте внимания, только для эксперимента.

[Роман]

Антон Спирин,

В "спортивные принадлежности" - в самом низу съезжает влево, в то время "спортивное питание на развес" - практически ровно. Я даже ссылкам overflow: hidden; задал, не помогает... не пойму в чём дело. Что влияет...

[Антон Спирин]

Роман, я для скриншота не использовал абсолютное позиционирование. Там relative. И все прекрасно работает.
Вы проблему не там ищите.
Выпиливайте float: left и отрицательный маргин.
Вынесите a и div в отдельный контейнер с display: flex;
Отрицательный маргин это в большинстве случаев костыли, старайтесь таких приемов не использовать.
float в подобных кейсах уже года как три зазорно использовать, flex решает все эти задачи и гораздо удобней, читаемей и гибче в использовании.

[Роман]

Антон Спирин, спасибо! Думаю вы правы!

[Роман]

Антон Спирин, flex в данном случае не работает, так как мне нужно расположить блоки индивидуально - каждый, а flex - херачит всё под одну гребёнку

Почему происходит смещение галочек - я выяснил, это из за шрифта в ссылках... кол-во букв и пробелов как то влияет, но даже overflow: hidden; не помогает защитить соседние элементы от воздействия тега ссылки.

[Антон Спирин]

Роман,

flex в данном случае не работает, так как мне нужно расположить блоки индивидуально - каждый, а flex - херачит всё под одну гребёнку

Вам стоит изучить спецификацию flex, прежде чем делать такие громкие заявления.
Тут он отлично подходит и не будет никакого смещения.
Примерная структура:

<li>
  <div class="flex-container">
    <a>link</a>
    <div class="button"></div>
  </div>
  <ul><!-- list --></ul>
</li>