Centrera en div

Jag har tänkt att visa hur man kan gå till väga för att placera en div i mitten på sidan, oavsett skärmupplösning. Börja med att skapa en div. Min div är rosa med svarta kanter och 100 x 100 pixlar stor:

#div {

height: 100px;

width: 100px;

border: 1px solid #000000;

background-color: #ff3366

}

Och så här ser den ut: http://www.aspkoll.se/imgo/44.png

Nu lägger vi till två enkla rader i CSS-dokumentet.

margin-right: auto;

margin-left: auto; 

Nu är diven centrerad: http://www.aspkoll.se/imgo/45.png

Koden skulle kunna förstkortas till...

margin: 0px auto;

... men personligen tycker jag att det första allternativet är mer lättläst.

Detta tips skapades 2007-10-08 14:25:25 av frisko. Det har lästs 1230 gånger. ||

Kommentarer