Задать вопрос
@green300
html

Как сделать центрировку символа в блоке на css?

Большая буква по центру получается, а маленькая смещается.63e4d3cd7516b455381853.png
63e4d3e163cef742055826.png

что исправить в стилях?
<style type="text/css">
    .ava{
        display: inline-block;
        background-color: <?=$color[$name]?>;
        color: white;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-size: 13px;
        font-family: sans-serif;   
        vertical-align: baseline;
        text-align: center;     
    }
    .ava:after{
        display: inline-block;
        vertical-align: middle;
        content: '';
        height: 113%;
    }
</style>
  • Вопрос задан
  • 55 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 4
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
Например с помощью flexbox:
.ava{
        display: flex;
        align-items: center;
        justify-content: center;
       ...
    }
Ответ написан
3 комментария
3 комментария
noder_ss
@noder_ss
Изучаю БД
Вот тай сойдет?
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="ava">
    <p>К</p>
  </div>
</body>
<style>
  .ava{
    width: 30px;
    height: 30px;
    background-color: rgb(115, 82, 147);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    color:white;
    
    align-items: center;
  }
  
</style>
</html>
Ответ написан
3 комментария
3 комментария
golubevstudio
@golubevstudio
Digital master
чет не сработало..возможно нужно букву в отдельный див поместить


С кодом все окей. Ты не понимаешь как работаешь шрифт и что есть граница шрифта.

Для наглядности:
https://gyazo.com/a8c87f33a527de72bd8c2511d4b21076 Граница если буква большая
https://gyazo.com/134c5f82927ef82ff6823bdea03965c0 Граница если буква маленькая

Они обе стоят четко по-середине. Но сама буква, меньше чем ее контейнер и смещена.

Такое исправить можно только 3-мя способами:
1. Искать шрифт с минимальным смещением (геморрой)
2. Вручную двигать каждую буквуtop: ***px; left: ***px; (геморрой)
3. Буквы сохранить как svg иконки. Тогда граница будет четко по контуру буквы.

3 - Вот так:
https://gyazo.com/4f2c62ad3c49533d3bb28bcd0f255527

Помог? - Отмечай решением

ps:
vertical-align: baseline;
        text-align: center;


- Почему baseline? Тоже center

Да и вообще, зачем тут псевдокласс? Если ты так и так заворачиваешь в див?
https://codepen.io/bestowhope/pen/abjgmoP
Ответ написан
1 комментарий
1 комментарий
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
У символов разный размер, при этом высота строки одинаковая. Можно попробовать поиграть с параметром line-height (допустим, попробовать 0 или 1)
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Magento разработчик (Frontend)
ABС-TELECOM LLC
от 1 500 до 2 500 $
Инженер-энергетик
Ростелеком • Великие Луки
от 35 000 ₽
Senior JavaScript Developer
Vital Partners LLC
от 350 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Приложение на flutter
27 мар. 2023, в 19:46
75000 руб./за проект
Исправить ошибку Телетон API Telegram
27 мар. 2023, в 19:41
15000 руб./за проект
Разработать шаблоны поста для инстраграм
27 мар. 2023, в 19:23
1500 руб./за проект
Ещё заказы