CSS/Lehekülje paigutamine ekraani keskele
Levinud praktikaks veebilehtede loomisel on lehe paigutamine veebilehitseja aknas keskele.
Vana-kooli lahendus
muudaCSS-i eelseks lahenduseks oli kasutada tabelit ja center elementi:
<html>
<head>
<title>Keskele joondatud leht</title>
</head>
<body>
<center>
<table width="750">
<tr><td>Lehekülje sisu</td></tr>
</table>
</center>
</body>
</html>
Kuid center element on aga uuematest HTML-i standarditest eemaldatud, nagu kõik teised puhtalt kujunduslikku ülesannet täitvad elemendid ja atribuudid. Kuna kujundamiseks on mõeldud CSS siis, kuidas saavutada sama effekt CSS-ga?
Lahendus CSS-is
muudaKindlasti torkab paljudele pähe, et CSS-is on atribuut text-align, mis joondab elemendi sees oleva teksti keskele, kas lahendus ei peaks olema mitte selline HTML:
<html> <head> <title>Keskele joondatud leht</title> </head> <body> <div id="sisu">Lehekülje sisu</div> </body> </html>
Koos järgneva CSS-ga:
body {
text-align:center;
}
#sisu {
width: 750px;
border: solid green; /* et muuta blokk nähtavaks */
}
Ning tõesti... kasutades vanemaid IE versioone, selline lahendus töötabki, kuid teistes brauserites mitte. text-align on nimelt mõeldud vaid teksti keskele joondamiseks, kuid blokk-elementidele see mõju ei avalda. Korrektne on kasutada hoopis veerise väärtust auto, määrates selle vasakule ja paremale veerisele:
#sisu {
margin-left: auto;
margin-right: auto;
}
või lihtsalt:
#sisu { margin: 0 auto }
Jah, see toimib kenasti, kuid õnnetuseks ei mõista seda vanemad IE versioonid.
Lõpplahendus
muudaLõpplahenduseks on kombineerida mõlemad tehnikad:
body {
text-align: center; /* IE jaoks */
}
#sisu {
text-align: left; /* seame teksti-joonduse tagasi normaalseks */
margin: 0 auto; /* moodsamate brauserite jaoks */
width: 750px;
border: solid green;
}