Блог

Главная - Вопросы по программированию - Текст по центру по вертикали вместе с изображением в кнопке

Текст по центру по вертикали вместе с изображением в кнопке

#html #css #image #button

#HTML #css #изображение #кнопка

Вопрос:

Это довольно просто, у меня есть кнопка, я хочу значок слева от нее. Проблема в том, что текст кнопки немного смещен вниз, поэтому значок и текст не совпадают аккуратно. Я не совсем уверен, что вызывает это, я попробовал выравнивание по вертикали и настройку высоты строки.

http://codepen.io/anon/pen/EKlFb

HTML

 <button>
  <img src="http://img.informer.com/icons/png/16/3995/3995186.png"/>OBS
</button>

CSS

 button {
  font-weight: bold;
  height: 27px;
  line-height: 27px;
  vertical-align: middle;
}

Комментарии:

1. посмотрите Font Awesome, я знаю, что это не ответ на ваш вопрос, но мне всегда сложно выровнять изображения по тексту, а значки font awesome идеально выровнены

2. @SamCreamer Я знаю о шрифтах-потрясающе. Я просто не собираюсь устанавливать огромную библиотеку (или полностью удалять ее) для чего-то такого простого, как одна кнопка со значком. Это похоже на использование jQuery, когда все, что вам нужно сделать, это добавить EventListener к одной кнопке.

3. ваша точка зрения хорошо понята

Ответ №1:

Рабочая скрипка

Попробуйте выполнить следующее:

 <button>
   <img src="http://img.informer.com/icons/png/16/3995/3995186.png" alt="" class="icon"/>
   <span>OBS</span>
</button>

CSS:

 button img,
button span {
  vertical-align: middle;
}

Отредактировано:

Скрипка

Ответ №2:

Просто переместите изображение влево, и оно должно быть исправлено:

HTML:

 <button>
  <img src="http://img.informer.com/icons/png/16/3995/3995186.png" alt="" class="icon"/>
  OBS
</button>

CSS:

 button {
  font-weight: bold;
  height: 27px;
}

button > .icon
{
  float: left;
}

CodePen