В Bootstrap 4 вертикальное выравнивание значков материалов можно выполнить различными методами. В этой статье блога рассматриваются семь различных подходов к вертикальному выравниванию значков материалов в Bootstrap 4, а также приводятся примеры кода для каждого метода.

Метод 1: Flexbox
Flexbox — это мощный модуль макета CSS, обеспечивающий гибкие и адаптивные параметры выравнивания. Его можно использовать для вертикального выравнивания значков материалов, применяя свойства флексбокса к их родительскому контейнеру.

<div class="d-flex align-items-center">
  <i class="material-icons">icon_name</i>
</div>

Метод 2: вертикальное выравнивание по середине
Свойство CSS vertical-align: middleможно использовать для вертикального выравнивания значков материалов во встроенных или встроенных блочных элементах.

<span >
  <i class="material-icons">icon_name</i>
</span>

Метод 3: Высота линии
Установив для свойства CSS line-heightродительского контейнера ту же высоту, что и сам контейнер, значки материалов можно центрировать по вертикали.

<div >
  <i class="material-icons">icon_name</i>
</div>

Метод 4: абсолютное положение
Значки материалов можно расположить абсолютно внутри контейнера, а затем центрировать по вертикали с помощью свойств topи transform.

<div >
  <i class="material-icons" >icon_name</i>
</div>

Метод 5: отображение таблицы
Использование свойства CSS display: tableв родительском контейнере и display: table-cellна значке материала, вертикальное выравнивание может быть достигнуто.

<div >
  <span >
    <i class="material-icons">icon_name</i>
  </span>
</div>

Метод 6: служебные классы Flexbox
Bootstrap 4 предоставляет служебные классы, использующие flexbox. Применяя эти классы к родительскому контейнеру, значки материалов можно выровнять по вертикали.

<div class="d-flex align-items-center">
  <i class="material-icons">icon_name</i>
</div>

Метод 7: автоматическое поле
Установив для левого и правого полей значка материала значение auto, его можно центрировать по горизонтали внутри родительского контейнера, что приводит к выравниванию по вертикали.

Метод 7. Автоматическое поле.
Установив для левого и правого полей значка материала значение auto.

<div>
  <i class="material-icons" >icon_name</i>
</div>

В этой статье мы рассмотрели семь различных методов вертикального выравнивания значков материалов в Bootstrap 4. Эти методы обеспечивают гибкость и универсальность, позволяя вам выбрать подход, который лучше всего соответствует вашим конкретным требованиям. Используя эти методы, вы можете гарантировать, что значки материалов будут визуально выровнены в ваших проектах Bootstrap 4 визуально приятным и профессиональным образом.