Для выравнивания данных иконки в Bootstrap можно использовать различные классы и инструменты.
1. Использование класса text-center: Вы можете добавить класс text-center
к элементу, содержащему иконку, чтобы выровнять ее по горизонтали в центре контейнера. Например:
<div class="text-center"> <i class="fas fa-icon"></i> </div>
2. Использование класса d-flex и justify-content-center: Вы можете создать флекс-контейнер, добавив класс d-flex
к родительскому элементу и класс justify-content-center
для выравнивания иконки по горизонтали в центре контейнера. Например:
<div class="d-flex justify-content-center"> <i class="fas fa-icon"></i> </div>
3. Использование класса align-items-center: Если вы хотите выровнять иконку по вертикали в центре контейнера, вы можете добавить класс align-items-center
к родительскому элементу. Например:
<div class="d-flex align-items-center"> <i class="fas fa-icon"></i> </div>
4. Использование классов mx-auto и my-auto: Если вы хотите выровнять иконку как по горизонтали, так и по вертикали в центре контейнера, вы можете добавить классы mx-auto
и my-auto
к элементу иконки. Например:
<div class="text-center"> <i class="fas fa-icon mx-auto my-auto"></i> </div>
5. Использование позиционирования: Если встроенные классы Bootstrap не соответствуют вашим требованиям, вы всегда можете использовать стили позиционирования, такие как position: absolute
и top: 50%
вместе с transform: translate(-50%, -50%)
, чтобы выровнять иконку в центре контейнера. Например:
<div style="position: relative; height: 200px;"> <i style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" class="fas fa-icon"></i> </div>
Это лишь некоторые из возможных способов выравнивания данных иконки в Bootstrap. Выбор наиболее подходящего подхода зависит от ваших конкретных потребностей и предпочтений.