Правильный способ выровнять иконки по центру
Нужно выровнять иконки по центру-вертикально и горизонтально: Svg иконки разных размеров, а их контейнер, белый круг всегда одного размера: 100х100. Выравниваю через flexbox, но мне кажется это кривой и громоздкий способ
.icon-container
Отслеживать
задан 11 сен 2018 в 9:31
1,698 2 2 золотых знака 18 18 серебряных знаков 55 55 бронзовых знаков
В вырванном из контекста коде флекс вполне подойдет. Вообще не понятно, что именно вам не нравится в этом варианте и чем он громоздкий? Есть множество вариантов решить эту проблему, и в зависимости от общей задачи один вариант может подойти больше, а другой меньше.
11 сен 2018 в 9:49
text-align:center; line-height:100px;
Как сделать SVG по центру?
Аркадий Баганин, в графическом редакторе обычно картинки редактируют =))
В данном случае векторном. Иллюстратор, InkSpace и другие.
Решения вопроса 1
Rustam Bainazarov @SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
1. Во-первых, у вас SVG неправильный: сама картинка среди кучи пустого пространства.
2. Во-вторых, много лишнего CSS-кода.
3. В-третьих, лучше сделать через background-image, чтобы избежать ошибок масштабирования в IE.
4. В-четвертых я исправил и сжал ваш SVG:
Просто скопируйте SVG-код.
Как выровнять иконку по центру css
Если вы занимаетесь фронтенд-разработкой, то вам, возможно, приходится создавать разделы сайтов, содержащие логотипы каких-то компаний. На первый взгляд эта задача может показаться очень простой. Но, когда дело доходит до выравнивания и центровки логотипов, выясняется, что всё сложнее, чем кажется. Кроме того, тут стоит сказать о том, что изображения логотипов могут иметь разные размеры, и о том, что некоторые логотипы имеют вертикальную ориентацию, а некоторые — горизонтальную.
В этом материале я собираюсь рассмотреть различные способы размещения группы логотипов на странице, различные подходы к их качественному выравниванию средствами CSS. Полагаю, что статья понравится веб-дизайнерам, так как приёмы, о которых пойдёт в ней речь, помогут им упростить решение задачи по идеальному выравниванию логотипов в соответствующих разделах сайтов, над которыми они работают.
Пара слов о дизайне
Прежде чем мы углубимся в CSS-код и в разговор о том, как лучше всего организовывать и стилизовать логотипы различных размеров, мне хотелось бы немного рассказать о том, как я, выступая в роли дизайнера, работаю с логотипами в специальном приложении. Здесь я буду говорить о приложении Sketch, но вы можете пользоваться любым другим подобным инструментом.
Итак, у меня есть восемь логотипов, которые нужно разместить в сетке. Первым делом я их выделяю и перетаскиваю в рабочую область Sketch.
Выглядит эта куча логотипов весьма некрасиво. Давайте это исправим.
Выделяя логотипы, проверьте, чтобы соотношение их ширины и высоты было бы заблокировано, после чего доведите их ширину или высоту до 150px . В этом видео показано изменение размера логотипов и размещение их в сетке.
Размещение логотипов в сетке
Обратите внимание на то, что некоторые логотипы кажутся более крупными, чем другие. Логотип Airbnb — самый большой из всех. Для того чтобы разобраться в происходящем, я обычно размещаю их в прямоугольниках. Эти прямоугольники помогают мне лучше оценивать размеры логотипов, их выравнивание относительно друг друга и расстояние между ними.
Анализ логотипов
Учитывайте то, что расстояние между всеми прямоугольниками должно быть одинаковым. В Sketch этого легко добиться, выбрав строку, щёлкнув в верхнем правом углу на Tidy , и настроив расстояние. Лучше всего, чтобы это расстояние составляло бы, как минимум, 10px .
Теперь, когда мы вывели на страницу прямоугольники, становится хорошо заметным то, что некоторые из логотипов неправильно выровнены, то, что некоторые из них заметно больше, чем другие, и то, что некоторые логотипы находятся совершенно не там, где им следует быть. Вот что получилось после того, как я настроил размеры логотипов и выровнял их по центру.
Результат изменения размеров логотипов и их выравнивания. Логотип Dropbox Business после этого выглядит слишком маленьким
После изменения размеров логотипов и их выравнивания обнаружилась проблема с одним из них — с логотипом Dropbox Business. Я, чтобы сделать эту проблему заметнее, оставил на предыдущем рисунке соответствующий вспомогательный прямоугольник. Для начала, этот логотип ориентирован горизонтально (он очень длинный), и, кроме того, он имеет белый фон. Исправить ситуацию можно, обрезав фон в Sketch и увеличив логотип.
Исправление логотипа Dropbox Business
Теперь в нашем распоряжении есть хороший макет, который готов к тому, чтобы воссоздать его средствами HTML и CSS. Учитывайте то, что в следующих разделах мы будем исходить из предположения о том, что вы — веб-программист, и вам, от дизайнера, достались логотипы, на размер которых особого внимания никто не обращал.
Реализация макета для логотипов, основанного на CSS Grid
Поговорим о том, как создать раздел страницы, содержащий логотипы, учитывая следующие требования:
- Раздел с логотипами должен следовать правилам отзывчивого веб-дизайна.
- Размеры логотипов должны быть как можно ближе друг к другу. То есть — не рекомендуется, чтобы среди логотипов, например, был бы какой-то очень большой логотип, и какой-то — очень маленький.
- Нужно, чтобы для логотипов заранее были бы установлены минимальные/максимальные размеры.
В этом примере я разработаю макет раздела с использованием CSS Grid. Но это не должно вас ограничивать в выборе технологии для создания подобных разделов. Пользуйтесь здесь тем, что подходит вам, и то, что поддерживают интересующие вас браузеры.
Начало работы над разделом сайта с логотипами
Как видите, в результате оказалось, что логотипы занимают всю ширину родительских элементов. Размеры логотипов неоднородны. Поэтому давайте начнём улучшать наш раздел с того, что настроим свойство логотипов width :
Результат настройки ширины логотипов
Изменение ширины хорошо показало себя на некоторых логотипах. Но, например, внешний вид логотипа Dropbox это лишь ухудшило. Дело тут в том, что это — горизонтальный логотип. Прежде чем рассматривать решение этой проблемы, давайте попробуем настроить высоту логотипов:
Результат настройки высоты логотипов
Так, у нас проблема. Логотип Dropbox нехорошо растянуло по высоте. Дело тут в том, что высота этого логотипа меньше, чем у других. В результате установленное в CSS значение height для этого логотипа слишком велико. Его применение приводит к растягиванию логотипа с нарушением пропорций.
Решить эту проблему можно, воспользовавшись свойством object-fit :
В результате я пока остановлюсь на решении, предусматривающем использование свойства width .
Нашим следующим шагом будет выравнивание логотипов по горизонтали и по вертикали.
Flexbox-стили позволили отцентровать логотипы. Вот как они теперь выглядят.
Логотипы выровнены по центру, но логотип Dropbox получился слишком маленьким
Обратите внимание на то, что логотип Dropbox получился слишком маленьким. Это позволяет нам сделать вывод о том, что одна только настройка ширины для него не подходит. Как нам быть? Ещё один испытанный мной подход к решению этой проблемы, который показал себя лучше width-подхода, заключался в комбинировании свойств width и height . Но это, если помните, привело к деформации логотипа. Это, правда, можно исправить с помощью свойства object-fit: contain .
Результаты применения разных подходов к стилизации логотипов
Свойство object-fit: contain хорошо тем, что оно, независимо от ширины или высоты логотипа, заставляет изображение занимать отведённое ему пространство и при этом не искажаться.
О директиве supports и о свойстве object-fit
Я, уже после публикации данного материала, добавил в него этот раздел. А именно, речь идёт о применении директивы @supports для обнаружения поддержки браузером свойства object-fit . Если браузер это свойство поддерживает, то оно используется вместе со свойством height . Это нужно для того чтобы не дать логотипам растягиваться в браузерах, не поддерживающих object-fit . Благодарю Луиса за подсказку.
Для того чтобы убедиться в том, что эта методика работает так, как ожидается, я испытал её на другом наборе логотипов. Результат мне понравился.
Использование свойства object-fit
Тут мне хотелось бы продемонстрировать одну иллюстрацию, которая призвана показать сильные стороны свойства object-fit . Обратите внимание на то, что на следующем рисунке логотипы содержатся в пределах двух линий. Если же они, учитывая соотношение их сторон, не в состоянии заполнить всё доступное им пространство, они выравниваются по центру.
Анализ размещения логотипов
Использование свойства mix-blend-mode для удаления белого фона
Логотипы размещены на сером фоне. Благодаря этому мы можем заметить то, что некоторые из них, являясь JPG-изображениями, имеют белый непрозрачный фон.
Если вы не можете достать версию изображения логотипа с прозрачным фоном, вы, чтобы всё же избавиться от фона, можете воспользоваться CSS-свойством mix-blend-mode . С его помощью белый фон исчезнет как по волшебству.
Дело сделано! Белый фон исчез. Хотя тут стоит отметить то, что этот приём может сделать некоторые логотипы темнее. Например — так случилось с логотипом McDonald’s.
Логотипы до и после избавления от белого цвета. Обратите внимание на выделенные изображения
Использование CSS-селекторов
Я, после публикации, внёс в статью ещё одно дополнение. Дело в том, что в этом твите мне предложили использовать CSS-селекторы для того чтобы применить свойство mix-blend-mode только к .jpg- и .png-изображениям:
Выравнивание последнего ряда логотипов по центру
Выводя на страницу некий набор логотипов и используя сеточный макет, нельзя быть полностью уверенным в том, что в последнем ряду занятыми окажутся все места. Пустое место в последнем ряду логотипов (именно такой последний ряд имеется в нашем примере) выглядит не очень хорошо. Для того чтобы выровнять последний ряд логотипов по центру, лучше всего использовать для разработки макета соответствующего раздела не Grid, а Flexbox.
Теперь последний ряд логотипов будет аккуратно выровнен по центру.
Flexbox-макет и выравнивание последнего ряда логотипов по центру
Заключительные рекомендации
Прежде чем завершить эту статью, мне хотелось бы дать вам несколько советов, которые вы можете принять во внимание, работая над сеточным макетом для раздела страницы, в котором планируется вывести логотипы:
Как выровнять вертикально по центру иконку fontawesome?
vertical-align: center не помогает. Нужно чтобы иконка была в центре адаптивного блока. Как быть? display: flex это перебор, как по мне. Есть варианты?
Вариант с display:flex
Vertical-align работает только если есть элемент занимающий 100% высоты родителя.
ps. Прикладывайте код на будущее.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.4.14.41981
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
MagentaWAVE
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Как выровнять иконку по центру кнопки
Используя спрайт-изображения с иконками для кнопок сайта, я столкнулся с очень не приятной, но как оказалось, легко решаемой проблемой. Дело в том, что создавая свою мульти-картинку, я старался максимально уменьшить ее размер и вес, поэтому оставил только фактические изображения, удалив все отступы и пустое место вокруг иконок. В плоском дизайне, где можно обойтись без сложных многоцветных текстур, а простой одноцветный фон или градиент легко добавить с помощью CSS — самое то. В итоге получил вот такой набор иконок для кнопок вверх-вниз, меню и содержание:
Общий размер всей картинки 48×48 пикселя, отдельно каждой иконки — 24×24 соответственно. Кнопки квадратные, без текста, с символом в центре — все очень просто.
Сложность заключается в том, что если добавить изображения непосредственно к элементу кнопки как фон, через CSS, при этом указать позицию нужной картинки, выровнять по центру, запретить повторение,то вокруг, с той или иной стороны, в зависимости от положения выбранной иконки, останутся видны части остальных изображений спрайта.
Чтобы решить эту проблему средствами CSS, без дополнительных HTML-тегов для блока кнопки, нужно добавить псевдоэлемент ::before, для которого задать размеры высоты и ширины соответствующие размерам изображения с нужной иконкой, в данном случаи — 24px на 24px.
Выровнять логотип по центру
Выровнять логотип по центру
Доброе время суток! Проблема у меня не сложная, но решить ее не могу т.к. в css я не соображаю.
Выровнять логотип по центру в резиновой верстке
Привет всем,есть вот такой вот код,и он при разных разрешениях адаптируется под эти самые.
Выровнять логотип и меню
Добрый день . не получается выровнять логотип и меню на одном уровне <header> <div.
Выровнять логотип и текст в одну строку
Здравствуйте.Пытаюсь сделать текст на против лого,но выходит какая то дичь.Скрины в низу,как должно.
Здравствуйте!
Могу уточнить у вас по поводу вашего задания?
Вы сделали верстку в виде списка и логотип отдельно — это обязательное условие? И важное, но при коммерческом задании, пока учитесь можете упустить, но не забыть потом разобраться с поддержкой необходимых браузеров.
Самое простое решение, как мне кажется — это как посоветовал «gogolik» — разбить на части меню, как то так:
Дальше дело в стилях. Тут тоже несколько решений, задавать ширину для всех блоков и от этого их «позиционировать» или задавать ширину для блока с логотипом и «margin: auto; — для выравнивания по центру», а блокам меню float право-лево соответственно, ширину и положение текста справа для левого и слева для правого. Я думаю вы смыл поняли и мне ненужно все детально описывать.
Есть также интересный способ для решения вашей задачи с помощью flex. Тут правда нужно будет немного поменять верстку. Как мне кажется очень даже гибкий. С поддержкой сейчас тоже неплохо, но смотря под какие версии браузеров верстать. Об этом можете подробно почитать в google.
Если что-то непонятно или возникнут дополнительные вопросы, пишите буду рад помочь.
Добавлено через 1 минуту
Вот к стати «AlexZaw» описал решение на flex подробнее.
Похожие публикации:
- Как подключить sonoff basic
- Как подключить наушники mi true wireless earbuds basic 2 к ноутбуку
- Как подключить шрифт к сайту css google fonts
- Как подчеркнуть текст в html css
vertical-align
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты
Значения
baseline Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента. bottom Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех. middle Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. sub Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется. super Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним. text-bottom Нижняя граница элемента выравнивается по самому нижнему краю текущей строки. text-top Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. top Выравнивание верхнего края элемента по верху самого высокого элемента строки. inherit Наследует значение родителя.
В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height , при этом 0% аналогично значению baseline .
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по ее верхнему краю.
HTML5 CSS2.1 IE Cr Op Sa Fx
vertical-align TEX и LATEX Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById(» elementID «).style.verticalAlign
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .