Kaip išlyginti mygtukus vertikaliai naudojant HTML

HTML <div> elementas leidžia išlyginti formos elementus, įskaitant mygtukus, tiek vertikaliai, tiek horizontaliai. Įterpiant kelis mygtukus į vieną <div>, jie automatiškai išsidėsčia pageidaujama tvarka.

Reikalingi įrankiai

• Windows Notepad (arba bet kuri kita teksto redaktoriaus programa)

Žingsniai

1 žingsnis

Dešiniuoju pelės mygtuku spustelėkite HTML puslapį, pasirinkite „Atverti naudojant“ ir pasirinkite Notepad. Tai atvers failą teksto redaktoriuje.

2 žingsnis

Raskite sekciją, kurioje yra mygtukai, ir supakuokite jų kodą į <div class="button-wrapper"> žymą:

<div class="button-wrapper">
    <button>Mygtukas 1</button>
    <button>Mygtukas 2</button>
    <button>Mygtukas 3</button>
</div>

3 žingsnis

Pridėkite CSS taisyklę, kuri išlygins mygtukus vertikaliai centre:

.button-wrapper {
    display: flex;
    flex-direction: column;   /* išdėstyti vieną po kito */
    align-items: center;      /* horizontaliai centruoti */
    justify-content: center;  /* vertikaliai centruoti */
    height: 200px;            /* arba pageidaujamas aukštis */
}

Išsaugokite failą meniu File → Save, atnaujinkite naršyklę ir patikrinkite rezultatą.