Alinierea verticală a butoanelor

Tag-urile div din HTML vă permit să aliniați elemente de formular, cum ar fi butoanele, atât pe orizontală, cât și pe verticală. Prin încastrarea butoanelor într-un element div și aplicarea unor proprietăți CSS, puteți obține o aliniere perfectă.

Pasul 1

Deschideți fișierul HTML al paginii dvs. cu Notepad. Faceți clic dreapta pe fișier, selectați „Deschideți cu” și apoi „Notepad”.

Pasul 2

Localizați secțiunea care conține butoanele și înconjurați codul acestora cu un element buton-container:

<div class="buton-container">
    <button>Buton 1</button>
    <button>Buton 2</button>
</div>

Pasul 3

Adăugați CSS pentru alinierea verticală. Puteți face acest lucru direct în fișierul HTML, sub <style>:

<style>
.buton-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
</style>

Salvați modificările (File → Save) și deschideți din nou fișierul în browser pentru a verifica rezultatul.

Unelte necesare

• Windows Notepad