ЦСС се углавном користи за пружање најбољег стила ХТМЛ веб страници. Користећи ЦСС, можемо одредити распоред елемената на страници.
Постоје различите методе за поравнавање дугмета на средини веб странице. Дугмад можемо поравнати хоризонтално и вертикално. Дугме можемо центрирати користећи следеће методе:
Хајде да разумемо горе наведене методе користећи неке илустрације.
Пример
У овом примеру користимо Поравнање текста својство и поставите његову вредност на центар . Може се поставити у ознаку тела или у надређену див ознаку елемента.
Овде постављамо тект-алигн: центар; у надређеној див ознаци елемента дугмета.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me Тестирајте одмах Излаз
Пример
У овом примеру користимо приказ: мрежа; имовине, и маргина: ауто; имовина. Овде постављамо приказ: мрежа; у надређеној див ознаци елемента дугмета.
јава метод
Дугме ће се поставити у центар хоризонталне и вертикалне позиције.
Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> Тестирајте одмах Излаз
Пример
То је још један пример постављања дугмета у центар. У овом примеру користимо дисплеј: флек; имовина, јустифи-цонтент: центар; имовине, и алигн-итемс: центар; имовина.
Овај пример ће нам помоћи да поставимо дугме у центар хоризонталне и вертикалне позиције.
Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me Тестирајте одмах Излаз
