Как сделать знак плюс в точном центре круга на css?
Добрый день. Возникла следующая проблема. Требовалось создать значок "плюс в кружке", где плюс находится точно в центре кружка. При этом сам плюс является after-псевдоэлементом для одного div-а.
Код псевдоэлемента:
content: '+'; display: flex; position: absolute; z-index: 5; font-size: 35px; font-weight: 400; color: white; background-color: #1ED4B3; border: solid 1px #1ED4B3; border-radius: 50%; width: 45px; height: 45px; align-items: center !important; flex-direction:column !important; justify-content: space-evenly !important; |
content: '+'; display: flex; position: absolute; z-index: 5; font-size: 35px; font-weight: 400; color: white; background-color: #1ED4B3; border: solid 1px #1ED4B3; border-radius: 50%; width: 45px; height: 45px; align-items: center !important; flex-direction:column !important; justify-content: space-evenly !important;
Всё работает нормально для десктопных версий, но на всех мобильных браузерах проблема в том, что знак плюса в кружке сдвинут кверху, а не находится по центру.
Пробовал уже использовать знак заглавного плюса U+FF0B , пробовал использовать justify-content: space-between , justify-content: space-around , justify-content: center , align-items: stretch .
Есть идеи, из-за чего такое может быть и как это можно исправить?
Более полный код (включая класс div-а , к которому привязан псевдоэлемент):
.div__after{ display: flex; flex-direction: column; align-content: center; align-items: center; &::after{ content: '+'; display: flex; position: absolute; z-index: 5; font-size: 35px; font-weight: 400; color: white; background-color: #1ED4B3; border: solid 1px #1ED4B3; border-radius: 50%; width: 45px; height: 45px; align-items: center !important; flex-direction:column !important; justify-content: space-evenly !important; @media (--xs-viewport){ top: calc(100% - 10px); } @media (--md-viewport) { top: 25%; left: calc(100% - 10.5px); } @media (--lg-viewport) { left: calc(100% - 7.5px); } } } |
.div__after{ display: flex; flex-direction: column; align-content: center; align-items: center; &::after{ content: '+'; display: flex; position: absolute; z-index: 5; font-size: 35px; font-weight: 400; color: white; background-color: #1ED4B3; border: solid 1px #1ED4B3; border-radius: 50%; width: 45px; height: 45px; align-items: center !important; flex-direction:column !important; justify-content: space-evenly !important; @media (--xs-viewport){ top: calc(100% - 10px); } @media (--md-viewport) { top: 25%; left: calc(100% - 10.5px); } @media (--lg-viewport) { left: calc(100% - 7.5px); } } }
Дополнительно:
Сделайте плюс не шрифтом, а блоком из горизонтальной и вертикальной линий, потому что у шрифтов полно свойств:
Чему к примеру равна горизонтальная линия вашего шрифтового плюса при размере 35px? Если у вас размер блока 45px, то линия должна быть так же с нечетным размером ровно 1px или 3px, или 5px в любом другом случае (1.2px, 3.6px, 4px) браузер начнет смещать ваш плюс вверх и вниз, что вы и наблюдаете.
Если же блок будет с четным значением, например 44px, тогда, чтобы плюс стал по центру у него должен быть размер 2px,4px и т.д..
Шрифты для такой задачи не подходят, тем более с изменением шрифта изменится и его центр.
- Спасибо! Прошу прощения за, возможно, нубский вопрос, но как я смогу две пересекающиеся черты в content вставить?
- vladimirir, одна черта - after, вторая - before. content:'' (пустой). размеры черточек сами задаете.
- vladimirir, snippet
- Сергей delphinpro, спасибо большое)
Ответы:
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы создать знак плюс в точном центре круга на CSS, вам нужно использовать позиционирование элементов и стилизацию для создания круга и знака плюс.
Начнем с создания круга. Для этого мы можем использовать элемент
Вот пример кода на CSS, который позволит создать круг с знаком плюс в центре:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: #f00; /* цвет круга */ position: relative; } .plus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 5px; background-color: #fff; /* цвет знака плюс */ } .vertical { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .horizontal { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
И вот пример HTML, который использует эти стили:
<div class="circle"> <div class="plus"> <div class="vertical"></div> <div class="horizontal"></div> </div> </div><div class="circle"> <div class="plus"> <div class="vertical"></div> <div class="horizontal"></div> </div> </div>
Этот код создаст круг красного цвета с белым знаком плюс в центре. Вы можете настроить размеры, цвета и другие стили, чтобы подогнать его под ваши требования. Надеюсь, это поможет вам создать нужный дизайн!