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

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: что мне не подходит.
Есть ли у кого идеи как сделать так что бы буква столовалась на том же месте относительно круга?

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

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

Подписаться 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 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 157 просмотров
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 103 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 98 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 86 просмотров
2

ответа
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 59 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 102 просмотра
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Дорвботать приложение под IOS на Swift vocechanger

25 нояб. 2024, в 12:49

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

Мат. модель по вероятностям

25 нояб. 2024, в 12:43

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

Требуется сделать видео/анимацию конвертирования OST файла

25 нояб. 2024, в 12:12

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

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;

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

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

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

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