Placer i midten - CSS

Lær at placer elementer vandret og lodret i midten på en hjemmeside med CSS

Vandret centreret block element i CSS

Vandret centrering af et block-level element (<div>) kan gøres ved at sætte en width på elementet også sætte venstre og højre margin til auto.

VANDRET CENTRERET BLOCK ELEMENT I CSS

Lodret og vandret centrering i CSS

Lodret centrering er ikke lige så let at opnås i CSS som vandret centrering.
Det kræver at man kender størrelsen på elementet der skal lodret centeres.

ELEMENT I MIDTEN DEMO

Lodret og vandret centrering i CSS eksempel 2

Dette eksempel (som er taget fra Firefox browseren) fungere også godt når vinduet gøres mindre end indholdet, så presses indholdet sammen.

ELEMENT I MIDTEN DEMO 2

Lodret og vandret centreret baggrund i CSS

Har man kun brug for at centrer ét baggrundsbillede er det let med CSS.
Så behøver man ikke kende størrelsen på billedet.

BAGGRUND I MIDTEN DEMO

Ved at tilføje background-size kan man strække billedet til at fylde hele baggrunden.

STRUKKET BAGGRUND DEMO

Centrering i table

Vandret og lodret centrering fungere godt i <table> hvor det er let at få indholdet til at stå i midten.
12345
678910
1112131415
Resultatet ovenfor er skabt af følgende kode

TABLE DEMO
Siden er sidst opdateret mandag 25. juni 2018