Miten olisi järkevintä toteuttaa esim. 100x100 pikselin kokoinen div, joka olisi keskikohdassa niin pysty-, kuin vaaka-akselillakin. Koitin laittaa parentin heightiä 100%:iin, mutta eipä veny laatikko :(
Käytettäessä standardimoodia tehdään 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=utf-8">
<title></title>
<style type="text/css">
html,body
{
height: 100%;
margin: 0;
padding: 0;
}
#parent
{
background: #000;
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
#child
{
display: table-cell;
vertical-align: middle;
}
#box
{
background: #FFF;
height: 100px;
margin: 0 auto;
width: 100px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
<div id="box"></div>
</div>
</div>
</body>
</html>http://kontu.selfip.info/html.css.js/
Tosin ongelmana tässä nyt on se, että lopputulos ei toimi IE7:llä ja vanhemmilla. IE8:n betalla toimii. Jos tahtoo että homma pelittää myös IE:llä, niin HTML-osio muuttuu näin:
<body> <table id="parent"><tr> <td id="child"> <div id="box"></div> </td> </tr></table> </body>
Lisäksi CSS:ssä tarvinnee laittaa border-collapse: collapse; #parentille. Tietty voisi myös käyttää expressionia ja tarjoilla omaa CSS:ää ehdollisilla kommenteilla ettei tarvitsisi HTML:ään taulukkoa "turhaan" tunkea, mutta se vaatii hieman enemmän miettimistä ja kikkailua, että toiminnallisuus olisi identtinen muiden selainten kanssa.
Kiinteän kokoisella laatikolla onnistuu näin helposti:
.box{
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}Matso kirjoitti:
Kiinteän kokoisella laatikolla onnistuu näin helposti:
.box{ position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }
Eikös tuo laita VASEMMAN REUNAN 50% päähän näytön vasemmasta reunasta ja YLÄREUNAN 50% näytön yläreunasta, eli jos laatikon leveys ja korkeus vaikka 50% ruudun koosta, niin laatikko menee oikeaan alakulmaan, eikä keskelle.
E: No eipäs laitakkaan ;D En tajunnut nuita margineita.
punppis kirjoitti:
Matso kirjoitti:
Kiinteän kokoisella laatikolla onnistuu näin helposti:
.box{ position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }Eikös tuo laita VASEMMAN REUNAN 50% päähän näytön vasemmasta reunasta ja YLÄREUNAN 50% näytön yläreunasta, eli jos laatikon leveys ja korkeus vaikka 50% ruudun koosta, niin laatikko menee oikeaan alakulmaan, eikä keskelle.
E: No eipäs laitakkaan ;D En tajunnut nuita margineita.
Joo eli laitetaan se vasen ja ylä reuna 50%:iin ja sitten miinustellaan puolet sen boxin koosta niin että se saadaan keskelle.
Joo ja tällainen ei toimi kunnolla vaikka olisi kiva.
.box{
position: absolute;
width: 20%;
height: 20%;
top: 50%;
left: 50%;
margin-top: -1%;
margin-left: -10%;
background-color: yellow;
}mutta tällainen skaalautuu iellä ja fflla
.box1{
position: absolute;
width: 20%;
height: 40%;
top: 0%;
left: 50%;
margin-top: 0%;
margin-left: -10%;
background-color: red;
background-color: blue;
}
.box{
position: absolute;
width: 20%;
height: 20%;
top: 40%;
left: 50%;
margin-top: -0%;
margin-left: -10%;
background-color: yellow;
}
.box2{
position: absolute;
width: 20%;
height: 40%;
top: 60%;
left: 50%;
margin-top: 0%;
margin-left: -10%;
background-color: red;
}Mod. lisäsi kooditagit
Aihe on jo aika vanha, joten et voi enää vastata siihen.