Forum Mjukvara Programmering och digitalt skapande Tråd

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

1
Skriv svar
Permalänk
Medlem
●

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å?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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;}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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å.

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

http://www.nealgrosskopf.com/tech/thread.php?pid=37

kör jquery

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara