Выровнять значок материала по вертикали

Я пытаюсь выровнять мою "стрелку выпадающего меню" по вертикали в навигационном меню.

Я пробовал различные варианты, такие как вертикальное выравнивание: среднее, отображение: встроенный блок и тому подобное, но это не помогло. http://img02.imgland.net/jfCmDoW.png

HTML выглядит так:

  <li>
    <a href="#!" data-activates="dropdown1">English
      <i class="material-icons">arrow_drop_down</i>
    </a>
  </li>

Я создал JSFiddle, который демонстрирует проблему: https://jsfiddle.net/dbwaoLrh/

Объяснение того, что я делаю неправильно, очень ценится, поскольку я сталкиваюсь с этой проблемой каждый раз, когда я использую "нестандартные" размеры шрифтов с использованием materialize-framework.

Ответ 1

Возможно, вы пробовали различные styling, чтобы упорядочить icons, но вам нужно нацелиться на icons i.e. i tag, как показано ниже, и стиль,

.footer-links > li > a > i{
  vertical-align:middle;
}

Отметьте two jsFiddle, я добавил background к одному только для понимания цели.

https://jsfiddle.net/dbwaoLrh/2/

https://jsfiddle.net/dbwaoLrh/4/

Ответ 2

Используйте `line-height` для простого вертикального центрирования:

Это свойство управляет height строки в пробеге текста и добавляет равное количество пространства над и под линейным ящиком встроенных элементов. Если height контейнера известна, то установка line-height того же значения будет вертикально центрировать дочерние элементы.

.container {
    width: 200px;
    height: 200px;
    line-height: 200px;
}

Используйте `position` и `transform` для гибкого вертикального центрирования:

.container {
    position: relative;
    min-height: 100vh;
}
.vertical-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Или мы можем использовать margin вместо позиционирования!

Используйте `flexbox` для вертикального центрирования:

Вышеописанный метод отлично подходит для центрирования элементов, используя традиционную коробчатую модель и методы позиционирования. Он будет работать в IE9+, но если вам нужно только поддерживать современные браузеры или IE10+, вы можете добиться того же результата с гораздо меньшим количеством кода, используя flexbox.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Ответ 3

Попробуйте это

.material-icons {
    vertical-align: 1px; /*Change this to adjust the icon*/
}

Второй вариант, который вы можете использовать:

.material-icons {
    position: relative;
    top: 1px; /*Change this to adjust the icon*/
}

Что вы делаете не так

Существует правило css для icon: font-size: 24px, которое больше, чем родительский элемент привязки, а высота строки равна 1, поэтому итоговая высота строки составляет 24px; вот почему это не работает. Если вы хотите, вы можете использовать свой собственный код, просто измените высоту строки, равную родительскому элементу привязки, и используйте vertical-align: middle для значка

Смотрите Js Fiddle

Ответ 4

Вы должны попробовать следующее:

.material-icons {
    vertical-align: middle;
}

Ответ 5

Я использовал шрифт Awesome, и чтобы получить точно такое же вертикальное выравнивание с шрифтом материала, я настроил этот CSS, и он идеально выровнялся

.material-icons {
vertical-align: middle;
padding-bottom: 3px }

Протестировано в Firefox, Chrome, InternetExplorer и Edge.