Как выровнять текст и иконку по центру?
Как выровнять текст и иконку по центру,чтобы они были на одном уровне ? На данный момент текст находится у нижней части иконки.
.responsive__offer-icon < display: inline-block; >.responsive__offer-text < font-family: 'Roboto', sans-serif; font-size: 14px; color: #83a7a5; display: inline-block; >.fa-check-circle
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Отслеживать
задан 2 авг 2019 в 14:06
Vladislove Vladislove
492 1 1 золотой знак 5 5 серебряных знаков 20 20 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
vertical-align: middle; для иконки.
- +можно выровнять через
.responsive__offer
Отслеживать
ответ дан 2 авг 2019 в 14:20
353 1 1 серебряный знак 9 9 бронзовых знаков
ваш пример не показывает изменений
2 авг 2019 в 14:48
ты о чем?))) я написал решение проблемы к тому же не одно а два.
2 авг 2019 в 15:25
тыкни «выполнить код» в своем примере и примере выше
3 авг 2019 в 17:11
@ZaArs смешно, он и не должен ничего показывать. исправил на precode.
3 авг 2019 в 19:24
так то лучше) вернул +1
4 авг 2019 в 20:20
Если брать Ваш фрагмент кода, можно для fa-check-circle задать vertical-align: middle;
.responsive__offer-icon < display: inline-block; >.responsive__offer-text < font-family: 'Roboto', sans-serif; font-size: 14px; color: #83a7a5; display: inline-block; >.fa-check-circle
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Отслеживать
ответ дан 2 авг 2019 в 14:16
1,372 1 1 золотой знак 6 6 серебряных знаков 7 7 бронзовых знаков
- html
- css
- bootstrap
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как выровнить иконку по центру текста?
Как выровнить иконку по центру текста? 
Пример того, что требуется ниже:
Подскажите, пожалуйста! Заранее спасибо 🙂
- Вопрос задан более трёх лет назад
- 6716 просмотров
Как в кнопке выровнять по высоте иконку (css спрайт) и текст?
Но никак не могу выровнять иконку и текст. Иконки имеют разную высоту. Что я пробовал:
1) Задавал классу .sprite свойства inline-block vertical-align: middle — иконка то выше, то ниже текста. Не подходит.
2) Задавал классу .sprite свойства inline-block, а самой кнопке одинаковые height и line-height. Для текста эта методика рабоает, а для иконки — нет.
Как правильно выравнивать и правильно ли я вообще использую технику спрайтов? Например если применить к каждой кнопке класс sprite и позиционировать спрайтовую картинку через уникальный класс для каждой кнопки то вообще ерунда получается — соседние иконки из спрайта также внутри кнопки становятся (оно и понятно, т.к. в спрайте много картинок, отступ между картинками в 100-200 пикселей в спрайте не вариант).
- Вопрос задан более трёх лет назад
- 6414 просмотров
Выравнивание иконок по базовой линии шрифта
Добрый день. В этой коротенькой заметке я расскажу как кроссбраузерно выровнять иконки по базовой линии шрифта. Итак, задача на первый взгляд довольно тривиальна: в макете, который прислал дизайнер существует следующий, весьма стандартный, блок (имя пользователя в хедере после того как пользователь осуществил вход на сайт)
Не долго думая, пишем простую разметку и css к ней:
User Name .user-icon < width: 23px; height: 20px; background: url('person.png'); display: inline-block; margin-right: 3px; >.user-name
После чего открываем страницу во всех браузерах и видим, что всё везде работает как надо, так как все инлайн и инлайн-блок элементы по умолчанию выравниваются по базовой линии шрифта. Однако IE как обычно преподносит сюрприз. Я понимаю, что IE6 уже дышит на ладан, но вот с IE7 пока приходится считаться, и в нем как раз вышеприведенный код рендрится следующим образом:
Не уверен точно, в чем причина подобного поведения, но скорее всего это связано с некорректной работой свойства display: inline-block в IE6-7.
При этом если вместо спана с фоном поставить обычную картинку, то все прекрасно выравнивается, однако это решение нас не устраивает, так как все иконки зашиты в спрайт, что не позволяет нам использовать обычные картинки.
Решение пришло довольно быстро: нужно всего лишь запихнуть в спан еще один пустой спан, который насильственно заставляет весь блок, какого бы он ни был размера, выравниваться по базовой линии.
И наш HTML тогда начинает выглядить следующим образом:
User Name На этом всё. Спасибо за внимание.
Upd. 1
Для тех, кто не понимает, зачем ставить иконку отдельным элементом, а не просто фоном спану с текстом, объясняю:
1. Во-первых, решение с фоном зависит от высоты строки. Если высота иконки будет больше высоты строки, она будет обрезаться. А высота строки это такая величина, в которой никогда нельзя быть на 100% уверенным; в разных ситуациях, в разных браузерах, на разных платформах она может высчитываться совершенно по-разному.
2. Во-вторых высота строки зависит от размера шрифта и гарнитуры. Поэтому если пользователь вдруг у себя в настройках изменил размер шрифта, то все ваше позиционирование тут же слетит к черту.