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 елемента кнопки.
період ключ
Кнопка розташується в центрі горизонтальних і вертикальних позицій.
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: центр; власність, і align-items: center; власність.
Цей приклад допоможе нам розмістити кнопку в центрі горизонтальної та вертикальної позицій.
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 Перевірте зараз Вихід
