Hei,
Mulla on tällanen div:
<div style="display:none;position:absolute; top:20px; width:300px; background-color:#FFFFFF; padding:5px; opacity:0.74; border:solid thin #000000;"></div>
Miten saan ton keskitettyä ton boksin sivulleni sekä horisontaalisesti että vertikaalisesti?
Vertikaalinen on yleensäkin ollut ongelmana keskityksessä (mulla ainaki :P) mutta ainakin on pakollista että sekä html että body ovat kumpikin määritelty näin:
html {
height: 100%;
}
body {
height: 100%;
}
.center {
margin: auto auto;
}Tuon koodin pitäisi ainakin keskittää horisontaalisesti.
Laatikko on aika pieni ja se on ilmeisesti tarkoitus sijoittaa absoluuttisesti (tai fixedillä), joten keskitys onnistuu vaikka näin:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#keskitetty_laatikko {
background: #EEE;
border: 1px solid #000; /* vaikuttaa marginiin */
height: 300px; /* puolet vaikuttaa top marginiin */
left: 50%;
margin: -156px 0 0 -156px;
opacity: .74;
padding: 5px; /* vaikuttaa marginiin */
position: absolute;
top: 50%;
width: 300px; /* puolet vaikuttaa left marginiin */
}
</style>
</head>
<body>
<div id="keskitetty_laatikko">
</div>
</body>
</html>Tietty ongelmana on se, että sekä korkeus että leveys on pakko määrittää tarkasti pikseliarvoilla, joustavuutta ei tähän saa (ainakaan ilman JavaScriptiä).
z-indeksin asettamalla voi varmistaa sen, että laatikko on päällimmäisenä sivulla, sikäli jos elementtiä ei ole sivun syntaksissa sijoitettu viimeiseksi. IE6:n kanssa pitää muistaa, että select-elementit pomppii päällimmäiseksi vaikka mitä tekisi. Flashit ja muut vastaavat myös tahtoo selaimesta riippumatta olla päällepäsmäreinä.
Muoks!
Versio 2, joka ei toimi IE:llä, koska IE ei tue display: table; -temppuja:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
html {
display: table;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table-cell;
margin: 0;
padding: 0;
vertical-align: middle;
}
#keskitetty_laatikko {
background: #EEE;
border: 1px solid #000;
margin: 0 auto;
opacity: .74;
padding: 5px;
width: 300px;
}
</style>
</head>
<body>
<div id="keskitetty_laatikko">
<h1>Keskitetty</h1>
</div>
</body>
</html>Etuna se, että tämä on joustavampi. Muitakin kuin pikseliarvoja voi käyttää vaivatta, keskitys tapahtuu taulukkona. Lisäksi elementti voi venyä, jolloin sivusta tulee tavanomainen skrollattava, sen sijaan että ruudusta ulosjäävät alueet ovat pysyvästi näkymättömissä.
Kiitos molemmille!
Siis haluan vain sen yhden boksin keskitettyä, muiden elementtien pitäisi pysyä paikoillaan. Koitanpa nyt tota merrin jutskaa :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.