Mine sisu juurde

CSS/Lehekülje paigutamine ekraani keskele

Allikas: Vikiõpikud
< CSS

Levinud praktikaks veebilehtede loomisel on lehe paigutamine veebilehitseja aknas keskele.

Vana-kooli lahendus

[muuda]

CSS-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

[muuda]

Kindlasti 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

[muuda]

Lõ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;
}