CSS се използва главно за осигуряване на най-добрия стил на HTML уеб страницата. С помощта на CSS можем да определим подредбата на елементите на страницата.
Има различни методи за подравняване на бутона в центъра на уеб страницата. Можем да подравним бутоните както хоризонтално, така и вертикално. Можем да центрираме бутона, като използваме следните методи:
Нека разберем горните методи, като използваме някои илюстрации.
Пример
В този пример ние използваме подравняване на текст свойство и задайте стойността му на център . Той може да бъде поставен в body таг или в родителския div таг на елемента.
Тук поставяме подравняване на текст: център; в родителския таг div на елемента бутон.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me Тествайте сега Изход
Пример
В този пример ние използваме дисплей: решетка; собственост, и марж: кола; Имот. Тук поставяме дисплей: решетка; в родителския таг div на елемента бутон.
java архитектура
Бутонът ще се постави в центъра на хоризонталната и вертикалната позиция.
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> Тествайте сега Изход
Пример
Това е друг пример за поставяне на бутона в центъра. В този пример ние използваме дисплей: гъвкав; Имот, justify-content: център; собственост, и подравняване на елементи: център; Имот.
Този пример ще ни помогне да поставим бутона в центъра на хоризонталната и вертикалната позиция.
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 Тествайте сега Изход
