Док дизајнирају веб странице, програмери могу да додају различите компоненте, укључујући слике, текст, табеле и друге. Штавише, текст се може поравнати по средини у див користећи више ЦСС својстава. Најпопуларнији метод за хоризонтално центрирање текста је коришћење „ Поравнање текста ” атрибут. Штавише, можете користити и „ Висина линија ' и ' вертикално поравнати ” атрибути за вертикално поравнање текста.
Овај пост ће навести метод за центрирање текста вертикално као и хоризонтално унутар див.:
Како центрирати текст хоризонтално унутар дива?
Да бисте центрирали текст хоризонтално унутар дива, погледајте дату процедуру.
Корак 1: Направите див контејнер
У почетку, направите див контејнер уз помоћ „ <див> ” елемент. Затим убаците „ ид ” атрибут унутар почетне ознаке див. Након тога, уградите неки текст између див ознаке:
< див ид = 'алигн-цонтент' >
Линукхинт је једна од најбољих веб локација за креирање садржаја.
див >
Излаз
Корак 2: Приступите див контејнеру за поравнавање текста по средини
Сада приступите див контејнеру уз помоћ „ ид ” назив атрибута са бирачем “ # ” и примените следећа ЦСС својства:
#алигн-цонтент{ширина: 80 % ;
маргина: 0 ауто;
паддинг: 20пк;
позадина: #ц8едф3;
тект-алигн: центар;
боја: ргб ( 49 , петнаест , 240 ) ;
}
овде:
-
- “ ширина ” својство се користи за подешавање величине ширине контејнера.
- “ маргина ” специфицира празан простор изван контејнера.
- “ паддинг ” дефинише простор унутар границе елемента.
- “ позадини ” поставља боју позадине на задњој страни елемента.
- “ Поравнање текста ” својство се користи за постављање поравнања текста као „ центар ”.
- “ боја ” одређује боју за текст унутар ивице.
Може се приметити да смо успешно центрирали поравнати текст хоризонтално унутар креираног дива:
Како центрирати текст вертикално унутар дива?
Да бисте центрирали текст вертикално унутар див контејнера, пратите дата упутства.
Корак 1: Приступите див контејнеру
Пре свега, приступите креираном див контејнеру.
Корак 2: Примените ЦСС својства на центар текста вертикално
Затим примените доле наведена ЦСС својства да центрирате текст вертикално у див:
#алигн-цонтент{дисплеј: ћелија-табела;
ширина: 300пк;
висина: 150пк;
паддинг: 10пк;
боја: плава;
боја позадине: ргб ( 248 , 215 , 166 ) ;
граница: 3пк испрекидана #ф09д03;
вертикално поравнање: средина;
}
Према горњем исечку кода:
-
- Подесите ' приказ ” који специфицира понашање приказа елемента као „ табела-ћелија “, што значи да се понаша као ћелија табеле у елементу див.
- “ ширина ” својство одређује величину ширине елемента.
- “ висина ” поставља висину елемента.
- “ паддинг ” дефинише празан простор унутар елемента.
- “ боја ” се користи за подешавање боје текста унутар елемента.
- “ боја позадине ” одређује боју полеђине елемента.
- “ граница ” својство дефинише границу на елементу.
- “ вертикално поравнати ” својство се користи за подешавање вертикалног поравнања дефинисаног елемента у „ средњи ”.
Излаз
Научили сте о комплетној процедури за центрирање текста унутар контејнера на оба начина, вертикално и хоризонтално.
Закључак
Да бисте центрирали текст вертикално и хоризонтално унутар дива, прво направите див контејнер уз помоћ <див> елемента и приступите му помоћу селектора. Затим примените ЦСС својства у којима је „ Поравнање текста ” својство се користи за хоризонтално поравнање, а “ вертикално поравнати ” поставља вертикално поравнање. Овај пост је демонстрирао методе за центрирање текста вертикално и хоризонтално унутар див.