Как центрировать метку по вертикали?

Question

[ahillesius]

Метка возле текста Free Shipping on Orders of Rs. 2587
https://jsfiddle.net/emu5co9t/
Также приветствуются замечания по всему коду и рекомендации для адаптивности страницы, так как при изменении размера экрана все плывет не так, как нужно. По ссылке сами все увидите. Прошу при написании указывать, ответ ли это на вопрос или комментарий в целом. Это первый опыт. По этому не всегда понимаю, о чем идет речь.

Comments

[Ankhena]

Проверьте песочницу, сейчас в ней вообще нет "Free Shipping on Orders of Rs. 2587".

Если я всё правильно помню из вашего предыдущего вопроса, то для центрирования используйте флексы (ну или гриды)

[ahillesius]

Ankhena, эта правильная https://jsfiddle.net/emu5co9t/

[Ankhena]

ahillesius, если метка это белый кружок, то как её делать я писала в вашем предыдущем вопросе https://qna.habr.com/q/1095550
Если нет, то уточните о чем речь.

[ahillesius]

Ankhena, Вы имеете в виду псевдоэлемент ? Если я правильно понял, использование ::before возможно только при условии наличия url "кружочка" и создать его с помощью стиля невозможно. Поэтому задал новый вопрос. Вот, что я имею в виду. https://jsfiddle.net/emu5co9t/1/

[Ankhena]

ahillesius,

создать его с помощью стиля невозможно

Кружочки создаются с помощью border-radius: 50%

использование ::before возможно только при условии наличия url "кружочка"

Нет. Псевдоэлементу нужно свойство content и оно может быть пустым.
Только учтите, что псевдо по умолчанию инлайновый.

[ahillesius]

Ankhena, то, что псевдоэлемент инлайн разве как-то повлияет на что-то, ичывая, что псевдоэлемент относится к классу инлайнового элемента. ? Также оставил пустой "content", но ничего не изменилось https://jsfiddle.net/emu5co9t/2/

[Ankhena]

ahillesius, к инлайновым элементам не применяются размеры.
Начните пользоваться инструментами разработчика в браузере. Увидите, что у вас он просто 0х0.

Answer 1

[Name_23]

Попробуйте margin-top: 94% к .marker добавить. Скорее всего, есть способ автоматически это сделать, а не вручную, но я с css давно не работал, так что пока так.

Comments

[ahillesius]

Делал так, но хотелось найти именно способ сделать автоматически

[Name_23]

ahillesius, я заметил , у вас вёрстка на float-ах. Может, вы не знали, но это устаревшая технология, сейчас используют flex-ы и grid-ы.