Horizontalno centriranje elemenata CSS-om

Postoji nekoliko metoda za izvesti identičnu stvar međutim ova ne zahtjeva CSS hackove ni Javascriptove, a podržana je u svim browserima, pa čak i Internet Exploreru 6. Uz ovaj CSS trik, vaš kôd ostati će validan.

Stvari naučene u ovom naprednijem vodiču često možemo primjeniti na elemente poput navigacije, paginacije i slično.

Naš (x)HTML kôd između body tagova izgledati će ovako:

<div id="container">
  <div id="nav">
    <ul>
      <li><a href="#" class="selected">Početna</a></li>
      <li><a href="#">O nama</a></li>
      <li><a href="#">Usluge</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>

Naš CSS kôd izgledati će ovako:

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

a, a:visited {
  text-decoration: none;
  color: #0066FF;
}

a:focus, a:hover {
  color: #F60F60;
}

#container {
  margin: 30px;
}

#nav {
  overflow: hidden;
  position: relative;
  background: #EFEFEE;
}

#nav ul {
  float: left;
  position: relative;
  left: 50%;
}

#nav li {
  display: block;
  float: left;
  list-style: none none outside;
  position: relative;
  right: 50%;
  font-size: 18px;
  margin-left: 1px;
}

#nav a {
  display: block;
  padding: 6px 12px;
  background: #DDDDDD;
  line-height: 25px;
}

#nav a.selected {
  color: #FFFFFF;
  background: #333333;
}

Objašnjenje metode

Možda se neki CSS property-i koji nisu vezani uz veličine i boje čine suvišni, ali ukoliko izostavite koji stvar vjerojatno neće fukcionirati.

Prije svega, bitno je utvrditi kako floatani elementi bez property-a width imaju širinu koliko je širok sadržaj tog elementa.

Omotač navigacije sa id-om nav ima property overflow budući da je sadržaj unutar njega floatan i bez ove ili neke druge metode za čišćenje visina tog diva iznosila bi 0. Ovakav način čišćenja ne radi u Internet exploreru 6. Druga stvar zbog koje nam je potreban properyty overflow je kako ul element ne bi stvorio dodatnu horizontalnu navigaciju. Također je bitno napomenuti da ukoliko koristite padajuće izbornike overflow hidden bi ih prekrio. Upute za čišćenje nakon float elemenata moći ćete pročitati u jednom od sljedećih vodiča.

Metoda za centriranje funkcionira tako da prvo ul floatamo kako bi se prilagodio sadržaju, a zatim smo ga pomaknuli u desno za 50% širine njegovog roditelja (eng. parent), u ovom slučaju div-a sa id-om nav.

Elemente li također smo prvo floatali kako bi se prilagodili sadržaju, a zatim svakog od njih pomičemo u lijevo za 50% nakon čega bi stvar trebala biti centrirana.

Rezultat

Ukoliko ste sve pažljivo slijedili, tada biste trebali dobiti nešto nalik na sliku ispod:

Pokušajte resizeati browser kako biste utvrdili da je Vaša navigacija uvijek na sredini.

Resursi

HTML dokument ovog vodiča sa uključenim CSS-om preuzmite ovdje.

Nadamo se da je ovaj vodič koristio! U slučaju dodatnih pitanja, slobodno nas kontaktirajte i putem rubrike “Pitajte učitelja”.