Надим Закиров, она крутится идеально по центру. Из-за визуальных несоответствий самой иконки визуально получается неровно. Во-первых, иконку из шрифта следует заменить на картинку, чтобы она была всегда одинаковой, во-вторых, нужно подобрать иконку, которая была бы основана на круге, а не на эллипсе, в-третьих, нужно задать квадратные размеры блоку (не обязательно) и выровнять иконку внутри него.
Рустам Байназаров, с картинкой любой дурак может, так у картинки высота и ширина равны, проблем с ним нет. Мне интересно сделать именно с символом. Сейчас не у компа, позже проверю.
Надим Закиров, любой дурак может, конечно, но почему-то не вы, LOL. Дело не в ширине и высоте. Неравносторонний прямоугольник в CSS тоже идеально крутиться по своей оси. Проблема в самой шрифтовой природе символа.
Если символ визуально неровный, его форма эллипсоидная, если у шрифта есть внутренняя высота строки (не CCS с его line-height) и её влияние на выравнивание, которое нужно подбирать на глаз, а ещё есть внутреннее выравнивание символа, которое может отличаться от его бокса и не контролируется CSS, — то у вас остаётся только ручной подбор параметров, которые к тому же будут варьироваться от движка к движку.
Будучи вписанным в квадрат, будучи со сброшенной высотой строки CSS, будучи выравненным — данный конкретный символ всё равно имеет смещение, потому что шрифт такой:
Надим Закиров, вы не найдёте его, если не сделаете/найдёте шрифт с идеально вписанными символами, как это делал я в своё время. А ещё, не используя какой-то конкретный шрифт, вы не учитываете того, что шрифты в системах разные, не говоря уже о движках браузеров.
Рустам Байназаров, и все же я попробую. Можно же символ поместить в таблицу и вращать уже саму таблицу? Я еще не знаю, будет работать это или нет, но как буду к компа первым делом проверю это.
Рустам Байназаров, увы, никак. Проблема именно в соотношение сторон, у букв они не равны. Вполне можно обеспечить ровное вращение, если запихнуть символ в таблицу с одинаковой шириной и высотой + вертикальным выравниванием по центру, а затем вращать уже таблицу, но к сожалению такую таблицу не получится разместить в один ряд со строкой текста. Похоже придется использовать картинки.
Надим Закиров, а зачем таблица, когда есть flex? Да, я знаю, что они не равны, об этом писал выше. Есть внутренняя высота строки, предназначенная для надстрочных и подстрочных элементов, не говоря уже о неидеальности вписанности в бокс глифа.
И таблицу можно спокойно разместить в один ряд со строкой текста, если использовать inline-table или внутри flex-родителя.
Более того, в примере выше я разместил таблицу рядом с текстом в одну строку, чтобы показать, что это не изменит ситуацию:
P. S. Использовать таблицы для выравнивания по горизонтали и вертикали нельзя уже лет как 8.
Рустам Байназаров, не-не, я имел в виду реальную таблицу. Таблица в виде псевдоэлемента неполноценна в ней не будет работать вертикальное выравнивание. Насчет того, что использовать таблицу для выравнивания нельзя... видимо я мамонт) Очень часто использую таблицы, чтобы отцентрировать контент четко по центру страницы.
Рустам Байназаров, я просто привык, что если я создаю блок со стилем flex, то обязательно внутри должны быть дочерние блоки которые я уже могу настраивать как мне удобно. Обычно я на флексах создаю фото-галереи, либо делаю адаптивную сетку для разной информации, которую надо выводит красивыми блоками, для чего-то кроме этого не доводилось использовать флексы.
