Как расположить тег <i> по вертикали в теге <button>?

Question

Как расположить тег <i> по вертикали в теге <button>?

0

У меня есть тег кнопки вроде этого:

<button id="submit" style="height: 30px;">
   <i id="loginLoadIcon" class="spinnerIcon"></i>
   <span>Log in</span>
</button>

Что использует css вот так:

.spinnerIcon {
    width: 25px;
    height: 25px;
    background: transparent url('images/spinnerIcon.png') repeat-x 0 0;
}

Как центрировать я тег по вертикали в теге кнопки? Кнопка может быть изменена, и изображение должно оставаться вертикально по центру.

dovahkiin 17 дек. 2013, в 00:06

Источник

0

... почему вы используете тег i для этого значка?
Jon Newmuis 16 дек. 2013, в 22:24
2

@JonathanNewmuis...... Кажется, эта статья SO stackoverflow.com/questions/11135261/i-tag-for-icons, кажется, заявляет, что тег i является приемлемым для иконок, хотя это обычно считается плохой практикой.
Charlie74 16 дек. 2013, в 22:27
0

Унаследованный HTML-код. Уникальная причина в том, что она дает представление о иконе. См. Ответ Чарли 74
dovahkiin 16 дек. 2013, в 22:27

Показать ещё 1 комментарий

Теги:

html

css

3 ответа

0

button#submit {
  height: 30px;
  line-height: 30px;
}

.spinnerIcon {
    width: 25px;
    height: 25px;
    background: transparent url('images/spinnerIcon.png') repeat-x 0 0;
}

это должно сделать это.

CodeBrauer 16 дек. 2013, в 21:27

0

CSS vertical-align: средний будет центрировать его для вас.

<i style="vertical-align:middle" id="loginLoadIcon" class="spinnerIcon"></i>

Вы также можете сделать это так:

HTML

<button id="submit" style="height: 30px;">
   Log in
</button>

CSS

button{
    font-weight:italic;
}

zurfyx 16 дек. 2013, в 20:24

Ещё вопросы

... почему вы используете тег i для этого значка?
@JonathanNewmuis...... Кажется, эта статья SO stackoverflow.com/questions/11135261/i-tag-for-icons, кажется, заявляет, что тег i является приемлемым для иконок, хотя это обычно считается плохой практикой.
Унаследованный HTML-код. Уникальная причина в том, что она дает представление о иконе. См. Ответ Чарли 74

nice ass · Accepted Answer · 2013-12-16T21-28-00.000Z

Как насчет:

#submit{
  position: relative;
}

#submit::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 100%;
  background: transparent url('images/spinnerIcon.png') no-repeat left center;
}

?

И больше не нужно <i>. Возможно, вы потеряете и <span>, но я не знаю, как выглядит остальная часть вашего CSS :)

Я сохранил использование тега <i> с селектором как .spinnerIcon и определил display: block к нему с вашим кодом. Благодарю.