Как сделать круглую кнопку со значком по центру?

Question

zeni1agent @zeni1agent

CSS

Как сделать круглую кнопку со значком по центру?

У меня есть вот такой код

И мне нужно сделать ровный круг с иконкой ровно по центру
Уточню что некоторые иконки не симметричны и имеют не правильные пропорций
изо чего хоть программно они и находятся по центру но визуально нет и нужно как то их подвинуть
Я знаю что можно сделать так

a{
 color:#fff; 
  background:#0f0;
  padding:10px;
  border-radius:100%;
 position:relative;
font-size:40px
}
a:before{
position:absolute;
top:50%;
left:50%;
   content: "¶ ";
}

Но тогда придется при изменений padding или font-size постоянно подгонять top: и left: что мне не подходит.
Есть ли у кого идеи как сделать так что бы буква столовалась на том же месте относительно круга?

Вопрос задан более трёх лет назад
1839 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

6 комментариев

zeni1agent @zeni1agent Автор вопроса

Иконка ушла слегка вправо. можно это подправить оставив соотношение как есть?

Написано более трёх лет назад
0xD34F @0xD34F Куратор тега CSS

Не выдумывайте, стоит ровно по центру.

Написано более трёх лет назад
zeni1agent @zeni1agent Автор вопроса

Программно да но визуально все равно выпирает горбушка. не все иконки имеют идеальную симметрию изо чего иногда получается криво и надо слегка менять их положение. именно поэтому я и спросил
как сделать так что бы буква столовалась на том же месте относительно центра?

Написано более трёх лет назад
0xD34F @0xD34F Куратор тега CSS

не все иконки имеют идеальную симметрию изо чего иногда получается криво и надо слегка менять их положение

Ну вот вы на свой вопрос и ответили. Выравнивайте вручную. Под каждый отдельный символ и каждый отдельный размер шрифта. Удачи.

Написано более трёх лет назад
zeni1agent @zeni1agent Автор вопроса

0xD34F, Да но мне нужно подправить так что бы при увеличение или уменьшение padding или font-size
Иконка оставалось на том же месте относительно круга.
Другими словами мне нужно что бы она не меняла свое относительное положение.

Написано более трёх лет назад
0xD34F @0xD34F Куратор тега CSS

Вам же по центру надо было только что. Уже не надо? Тогда оформляйте новый вопрос.

Написано более трёх лет назад

5 комментариев

Ankhena @Ankhena Куратор тега CSS

Ничёсе и правда круг! А в кодепене еще и центр в левом верхнем углу.

Написано более трёх лет назад

zeni1agent @zeni1agent Автор вопроса

Все равно криво

div {
  background-color: red;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
div i {
 
  font-size: 50px;
}
div i:before {
    content:"¶"; 
}

Написано более трёх лет назад

Mambli Joe @Mambli-Joe

zeni1agent, before не надо делать. Просто вместо вставить символ который нужен

Написано более трёх лет назад
Mambli Joe @Mambli-Joe

Ankhena, Суть вопроса была в том что "буква" оставалась по центру сама без подгона margin и padding. Я показал ту часть которая вызывала проблему Если автор знает как использовать before и border-radius, то зачем мне это повторять и он сможет это применить, а пример центрирования и так показан. Можно, конечно, еще придраться. Цвет не такой, символ не такой, да и так далее.

Специально для Вас обновил.

Написано более трёх лет назад
Mambli Joe @Mambli-Joe

zeni1agent, https://codepen.io/anon/pen/yWQKGw

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

zeni1agent @zeni1agent Автор вопроса

Не особо помогло

div{
  display:flex;
  background:#000;
  width: 400px;
height: 400px;
  justify-content:center;
  align-items:center;
}
a{
 color:#fff; 
  background:#0f0;
  padding:10px;
  border-radius:100%;
  font-size:40px;
    display: flex;
justify-content: center;
align-items:center;
}
a:before{
   content: "¶ ";
}

Написано более трёх лет назад

bbquite @WebDev921

zeni1agent, я же говорю, что без псевдоэлементов

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="">
		<span>Текст или символ который надо о центру</span>
	</a>
</body>
</html>

a{
	display: flex;
	justify-content: center;
	align-items: center;
}

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 12 часов назад
- 60 просмотров
0

ответов
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- 16 часов назад
- 62 просмотра
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 20 часов назад
- 69 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- 21 час назад
- 764 просмотра
2

ответа
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- вчера
- 39 просмотров
0

ответов
CSS

Простой
Как применить свойство к псевдоэлементу?
- 3 подписчика
- вчера
- 222 просмотра
2

ответа
HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- 28 апр.
- 48 просмотров
1

ответ
HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 28 апр.
- 70 просмотров
1

ответ
HTML

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- 27 апр.
- 68 просмотров
1

ответ
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- 27 апр.
- 49 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Внести правки по сайту на Wordpress

01 мая 2024, в 08:16

10000 руб./за проект

Интеграция Битрикс в наше FastAPI приложение

01 мая 2024, в 02:11

5000 руб./за проект

Правки в макет Figma

01 мая 2024, в 00:29

2000 руб./за проект

Answer 1 · 2019-05-31 11:21:43

.icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  padding: 0.2em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  color: #fff;
  background: #0f0;
}
.icon::before {
  content: attr(data-char);
  font-size: 1em;
}

<a class="icon" data-char="¶"></a>
<a class="icon" data-char="X"></a>
<a class="icon" data-char="?"></a>

https://jsfiddle.net/6pzcmqwh/

Answer 2 · 2019-05-31 11:24:25

Codepen

<div class = "wrapper">
<div>
  <i class="fas fa-paragraph"></i>
</div>
  </div>

.wrapper {
 margin: auto auto;
}
div {
  background-color: #0f0;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius:  50%;
}
div i {
  font-size: 50px;
  color: white;
}

Answer 3 · 2019-05-31 11:22:08

Используй флексы. Повесь это на тег <а> и все содержимое будет по центру. Псевдоэлементы тут вообще не нужны

display: flex;
justify-content: center;
align-items:center;

Как сделать круглую кнопку со значком по центру?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт