Ina Code Blog

bunch of code in one place
« Abecedni seznam v Wordpress-u
Flexible upload slik za Wordpress »


Nov
6

Centriranje strani vertikalno in horizontalno

Posted by admin in html / css

Večino spletnih strani, ki sem jih naredila, je bilo potrebno postaviti horizontalno na sredino brskalnika in to se enostavno naredi z ‘margin’ in ‘width’ parametri v div-u ‘container’. Potem pa sem naletela na problem: kako postaviti stran na sredino po vertikali? Našla sem nekaj nasvetov s 50% širino in višino div-ov, ampak se je pojavil drug problem in sicer, ko zmanjšaš velikost brskalinka, se je zgornji del strani skril pod okno brskalnika. Tu pa tam je smiselno malo pogledat v preteklost in tako sem našla rešitev z uporabo tabele (že precej časa namreč uporabljam samo div-e!). Stran vertikalno centriraš, če dodaš ‘vertical-align’ parameter v ‘table’ oznako. Spodaj je celotna koda za centriranje strani.

HTML koda:

<html>
<head>
  <title>Centriranje strani vertikalno in horizontalno</title>
</head>
<body>
<table id=”container”>
  <tr>
    <td>Vsebina je centrirana horizontalno in vertikalno!</td>
  </tr>
</table>
</body>
</html>

CSS koda:

html, body, #container {
  height:100%;
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
  vertical-align: middle;
  width: 400px;
}

Tukaj je primer.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Leave a Reply

Comment