Как да подравните бутоните вертикално

HTML елементът <div> позволява подравняване на елементи от формата – например бутони – както хоризонтално, така и вертикално. Когато имате няколко бутона на една страница, можете да ги обвиете в един <div>, за да ги позиционирате един под друг в желаното място. За тази цел не е необходим специален софтуер – достатъчно е да редактирате кода с Windows Notepad.

Стъпка 1

Щракнете с десния бутон върху HTML файла на вашия сайт и изберете „Open With“ → Notepad. По този начин страницата ще се отвори в текстовия редактор.

Стъпка 2

Намерете частта от кода, където са разположени бутоните. Обвийте кода на бутоните със следната структура:

<div class="button-container">
    
    <button>...

Стъпка 3

Добавете CSS правила, които ще подравнят бутоните вертикално в средата на контейнера:

.button-container {
    display: flex;
    flex-direction: column;   /* подрежда бутоните подредено */
    align-items: center;      /* центрира хоризонтално */
    justify-content: center;  /* центрира вертикално */
    height: 200px;            /* задайте желаната височина */
}

След като запазите промените (File → Save), отворете HTML файла в браузъра, за да проверите дали бутоните са подравнени както желаете.

Необходими инструменти

• Windows Notepad (или друг прост текстов редактор)