WN - Centrera med DIV

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Centrera med DIV (https://www.wn.se/forum/showthread.php?t=5435)

void	2005-01-11 00:05

Hej,

frågan har säkert ställts tidigare, men jag har sökt och inte funnit något svar. Hur gör man en sida som skall ligga horisontellt centrerad, säg med 600px bredd, på skärmen med en div? Jag vill inte baka ihop någon frame som jag gjort tidigare, det kan knappast vara optimalt.

Jag har kikat på http://www.alistapart.com/ och efter att försökt göra som de så funkar det i Firefox, men inte i Explorer. Nån som kan ha en aning om vad jag gör för fel? Har kopierat klassen wrapper rakt av för att centrera saker och ting.

mvh
Marcus

Clarence

2005-01-11 00:26

text-align:center på body tror jag löser dina problem.

Björn

2005-01-11 00:41

Citat:

Originally posted by Clarence@Jan 11 2005, 01:26
text-align:center på body tror jag löser dina problem.

Det tror jag med

Jester

2005-01-11 02:10

Kod:

<div style="width:600px;margin-left: auto;margin-right: auto;">innehåll</div>

Sätt sedan en ram på den så ser du att området är centrerat.

Joel	2005-01-11 04:10

Går det att centrera innehåll i mitten av sidan också? "valign="middle"" som det heter i html? alltså "centrera" innehållet till mitten på höjdledden?
<table height="100%" width="100%" valign="middle">
<tr><td></td></tr>
</table>

eller nått i html, men med div/css?

Jester

2005-01-11 04:44

Citat:

Originally posted by programmer@Jan 11 2005, 05:10
Går det att centrera innehåll i mitten av sidan också? "valign="middle"" som det heter i html? alltså "centrera" innehållet till mitten på höjdledden?
<table height="100%" width="100%" valign="middle">
<tr><td></td></tr>
</table>

eller nått i html, men med div/css?

Inte på det viset. Det gör man isf med CSS. Ska man göra det får man skapa en null-kontainer som man placerar absolut 50% horizontellt 50% vertikalt (0x0 pixlar) och sedan lägga en relativt placerad kontainer inuti denna som man sedan kompenserar uppåt samt åt vänster med hänseende på kontainerns storlek.

Susanne

2005-01-11 10:04

Så här gör du i din css (exempel när du har din div med id=site):

Kod:

#site { 

 position:relative;

 width:765px; 

 text-align:left; 

 margin-left:auto; 

 margin-right:auto; 

 border: 1px solid #043465;

 background-color:white;

 padding:0px;

 }

Vill du se mer kod kolla källkoden på stureforsbuss.se (som jag kodat).

digiArt

2005-01-11 11:41

Här hittar du hur du får en box "dead center"

Här finns det väldigt många bra resurser

void	2005-01-11 18:08

Tack för alla svar! :)

Koden som susja föreslog funkade fint.

Alla tider är GMT +2. Klockan är nu 13:14.