Justera knappar vertikalt med HTML-div-taggar

Justera knappar vertikalt med HTML-div-taggar

Med en HTML div‑tagg kan du enkelt justera formulärelement, som knappar, både vertikalt och horisontellt. Genom att placera knapparna i en div kan du centera dem på sidan.

Steg 1 – Öppna sidan i Notepad

Högerklicka på din HTML‑fil, välj Öppna med och dubbelklicka på Notepad. Detta öppnar filen i en textredigerare.

Steg 2 – Inkludera knapparna i en div

Bläddra ner till den del av sidan där knapparna finns. Lägg in dem mellan en ny div‑tagg:

<div class="button-wrapper">
    <button type="submit">Skicka</button>
    <button type="reset">Återställ</button>
</div>

Steg 3 – Lägg till vertikal justering

Innan du sparar, lägg till ett enkelt CSS‑stycke som centrerar knapparna vertikalt i div:

<style>
.button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;   /* Horisontell centering */
    justify-content: center; /* Vertikal centering */
    height: 200px;         /* Justera efter behov */
}
</style>

Efter att du lagt till koden, klicka på Arkiv > Spara i Notepad. Öppna filen i din webbläsare för att se förändringarna.

Det du behöver

• Windows Notepad (eller annan enkel textredigerare)