При разработке веб-страниц разработчики могут добавлять различные компоненты, включая изображения, текст, таблицы и другие. Кроме того, текст можно выровнять по центру в div, используя несколько свойств CSS. Самый популярный метод горизонтального центрирования текста — использовать « выравнивание текста атрибут. Кроме того, вы также можете использовать « высота линии ' и ' вертикальное выравнивание ” для вертикального выравнивания текста.
В этом посте будет указан метод центрирования текста как по вертикали, так и по горизонтали внутри div:
Как центрировать текст по горизонтали внутри div?
Чтобы центрировать текст по горизонтали внутри div, ознакомьтесь с данной процедурой.
Шаг 1: Создайте контейнер div
Первоначально создайте контейнер div с помощью команды « <дел> элемент. Затем вставьте « идентификатор ” внутри открывающего тега div. После этого вставьте некоторый текст между тегом div:
< див идентификатор '=' 'выравнивание содержимого' >
Linuxhint — один из лучших веб-сайтов для создание контента.
див >
Выход
Шаг 2. Доступ к контейнеру div для выравнивания текста по центру
Теперь получите доступ к контейнеру div с помощью « идентификатор 'имя атрибута с селектором' # ” и примените следующие свойства CSS:
# выравнивание содержимого {ширина: 80 % ;
допуск: 0 авто;
отступ: 20 пикселей;
фон: #c8edf3;
выравнивание текста: по центру;
цвет: RGB ( 49 , пятнадцать , 240 ) ;
}
Здесь:
-
- “ ширина ” используется для установки ширины контейнера.
- “ допуск ” указывает пустое пространство за пределами контейнера.
- “ набивка ” определяет пространство внутри границы элемента.
- “ фон » устанавливает цвет фона на задней стороне элемента.
- “ выравнивание текста Свойство используется для установки выравнивания текста как « центр ».
- “ цвет ” определяет цвет текста внутри границы.
Можно заметить, что мы успешно центрировали выровненный текст по горизонтали внутри созданного div:
Как центрировать текст по вертикали внутри div?
Чтобы центрировать текст по вертикали внутри контейнера div, следуйте предоставленным инструкциям.
Шаг 1: доступ к контейнеру div
Прежде всего, получите доступ к созданному контейнеру div.
Шаг 2. Примените свойства CSS к центрированию текста по вертикали
Затем примените перечисленные ниже свойства CSS, чтобы центрировать текст по вертикали в div:
# выравнивание содержимого {отображение: таблица-ячейка;
ширина: 300 пикселей;
высота: 150 пикселей;
отступ: 10 пикселей;
цвет синий;
цвет фона: rgb ( 248 , 215 , 166 ) ;
граница: пунктирная 3px #f09d03;
вертикальное выравнивание: посередине;
}
Согласно приведенному выше фрагменту кода:
-
- Установить ' отображать », который определяет поведение отображения элемента как « ячейка таблицы ”, что означает, что он действует как ячейка таблицы в элементе div.
- “ ширина ” задает размер ширины элемента.
- “ высота » задает высоту элемента.
- “ набивка ” определяет пустое пространство внутри элемента.
- “ цвет ” используется для установки цвета текста внутри элемента.
- “ фоновый цвет ” определяет цвет обратной стороны элемента.
- “ граница ” определяет границу элемента.
- “ вертикальное выравнивание » используется для установки вертикального выравнивания определенного элемента в « середина ».
Выход
Вы узнали о полной процедуре центрирования текста внутри контейнера в обоих направлениях, вертикально и горизонтально.
Заключение
Чтобы центрировать текст по вертикали и горизонтали внутри div, сначала создайте контейнер div с помощью элемента