У ХТМЛ-у, дугмад су елементи на које се може кликнути и који се користе за обављање одређене радње. Користећи ЦСС, можете поставити позицију дугмета где желите да га поставите. За то постоји неколико техника у ЦСС-у, једна од њих је флекбок. “ флек ” се користи за постављање положаја елемента према његовом прозору за приказ.
Овај чланак ће научити како да центрирате дугме користећи ЦСС Флекбок.
Дакле, почнимо!
Како центрирати дугме користећи ЦСС флекбок?
“ флек ” је вредност постављена за својство приказа ЦСС-а. У зависности од величине оквира за приказ, поставља садржај или елементе у складу са тим. У ЦСС-у, флек вредност ствара једнак простор између елемената како би се осигурало да су ефикасно распоређени.
Синтакса
У горе наведеној синтакси, „ флек ” ће бити наведен као вредност „ приказ ' имовина.
Дакле, хајде да погледамо пример за централизацију дугмета користећи флек.
Пример
У <боди> ХТМЛ-а направићемо контејнер са класом <див> под називом “ дугме ” и унутар њега креирајте дугме помоћу ознаке <буттон>:
У ЦСС датотеци, „ .дугме ” се користи за приступ класи коју смо доделили <див>. Да бисмо поставили позицију додатог дугмета у центру дива, доделићемо вредност својства приказа, јустифи-цонтент и алигн-итемс као „ флек ”, “ центар ', и ' центар ', редом. Штавише, поставићемо висину креираног дива на „ 200пк ” и доделите вредност ивице као „ 5пк ”, “ чврст ' и ' црн ”:
У горе наведеном коду, „ оправдати-садржај ” се користи за постављање дугмета у центру див хоризонтално и „ алигн-итем ” се користи за постављање дугмета у центру дива вертикално.
Након имплементације горњег кода, идите на ХТМЛ датотеку и извршите је да бисте видели следећи исход:
Можете видети да је дугме успешно приказано у центру див.
Закључак
Да бисте центрирали дугме, можете користити „ приказ ”, “ алигн-итем ', и ' оправдати-садржај ” својства ЦСС-а. Ова својства вам омогућавају да поставите дугме у центру див или било ког елемента када наведете вредност својства приказа као „ флек ”, алигн-итем и јустифи-цонтент као „ центар ”. У овом чланку смо објаснили како да центрирате дугме помоћу Флекбок-а уз помоћ одговарајућег примера.