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

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.