Lägga in objekt i mitten på en hemsida, css

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Sep 2009

Lägga in objekt i mitten på en hemsida, css

Nuförtiden ska ju inte tabeller användas vid utformning av en hemsida, såvida det inte handlar om data som ska placeras i tabeller..
Nåväl, jag vill placera ett objekt i mitten på webläsarfönstret och objektet ska alltid vara i mitten oavsett fönsterstorlek.

Ungefär som en tabells motsvarighet:

width="100%" height="100%" align="center" valign="middle"

Hur görs detta med css och XHTML?
Jag lyckas inte riktigt och jag tycker det känns onödigt att ta till javascript för detta.. Måste väl gå?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Okt 2002

Re: Lägga in objekt i mitten på en hemsida, css

Citat:

Ursprungligen inskrivet av datanatet
Nuförtiden ska ju inte tabeller användas vid utformning av en hemsida, såvida det inte handlar om data som ska placeras i tabeller..
Nåväl, jag vill placera ett objekt i mitten på webläsarfönstret och objektet ska alltid vara i mitten oavsett fönsterstorlek.

Ungefär som en tabells motsvarighet:

width="100%" height="100%" align="center" valign="middle"

Hur görs detta med css och XHTML?
Jag lyckas inte riktigt och jag tycker det känns onödigt att ta till javascript för detta.. Måste väl gå?

Finns olika sätt att göra det på har du en flytande layout så hade jag gjort såhär:

#div{ margin-left: 10%; margin-right: 10%;}

I en fixerad layout så hade jag gjort:

#div { margin-left: auto; margin-right: auto; width: 50em;}

| Apple iMac 24" 3,06 GHz | 4GB RAM | 1TB HDD | OSX 10.8.2 |(halvdöd)
| Macbook Pro Retina | 16GB RAM | 256GB HDD | | OSX 10.8.2 |

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av datanatet
Nuförtiden ska ju inte tabeller användas vid utformning av en hemsida, såvida det inte handlar om data som ska placeras i tabeller..
Nåväl, jag vill placera ett objekt i mitten på webläsarfönstret och objektet ska alltid vara i mitten oavsett fönsterstorlek.

Ungefär som en tabells motsvarighet:

width="100%" height="100%" align="center" valign="middle"

Hur görs detta med css och XHTML?
Jag lyckas inte riktigt och jag tycker det känns onödigt att ta till javascript för detta.. Måste väl gå?

Det går men du får bråka otroligt mycket med alla de olika webbläsarna som finns och tolkar koden på sitt sätt.

Senast jag gjorde detta så gjorde jag det i javascript. Hämtade ut viewport (bredd och höjd i pixlar) och så ritade jag upp objektet i mitten.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av Toke
Finns olika sätt att göra det på har du en flytande layout så hade jag gjort såhär:
[/code]

Det där hjälper bara i horisontell centrering. Frågan gäller vertikal också.

----

Ett jobbigt problem med vertikal centrering när det gäller marginaler eller positioner med hjälp av procent-storlek är att objektets övre-vänstra hörn är det som blir centrerat. Så det krävs extra kod för att centrera mot objektets mittpunkt också.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Okt 2002

| Apple iMac 24" 3,06 GHz | 4GB RAM | 1TB HDD | OSX 10.8.2 |(halvdöd)
| Macbook Pro Retina | 16GB RAM | 256GB HDD | | OSX 10.8.2 |

Trädvy Permalänk
Medlem
Plats
Östersund
Registrerad
Aug 2007

{display:table-cell; vertical-align:middle;}

mobo Asus M4A88TD-M EVO/USB3 cpu 1100T kylare Noctua NH-D14
gpu RX 460 passive ram 16GB DDR3 1600MHz ssd Samsung 850 EVO 250GB
psu Corsair AX 850 skärmar 3 * 40" NEC P401

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Sep 2009

dinpryl {
height: 200px;
width: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -200px;
}

notera att margin-top och margin-left är hälften av width och height. hence, centrerat.