Načrtovanje in razvoj spletnih aplikacij

Poravnava bločnih elementov s CSS

Bločni element je element, ki zavzame vso razpoložljivo širino, pred in za elementom pa je prelom vrstice. Primeri bločnih elementov:

  • <h1>
  • <p>
  • <div>
  • ...

Bločne elemente lahko vodoravno sredinsko poravnamo na različne načine:

 

Vodoravna sredinska poravnava z margin

Bločni element sredinsko poravnamo z nastavitvijo levega in desnega zunanjega odmika margin na vrednost auto. S tem se prostor na levi in desni strani bločnega elementa enakomerno razdeli, bločni elemnt pa se vodoravno sredinsko poravna.


<div class="center">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. 
      Quisque venenatis metus id urna placerat.</p>
   <p>Sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
.center {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    background-color: #fccc88;
    padding: 5px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat.

Sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.

V primeru, da je širina width:100% , poravnava z margin nima nobenega učinka.

 

Vodoravna poravnava z position

Bločne elemente lahko vodoravno poravnamo tudi z absolutnim pozicioniranjem:

<div class="desno">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. 
      Quisque venenatis metus id urna placerat.</p>
   <p>Sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
.desno {
    position: absolute;
    right: 0px;
    width: 60%;
    background-color: #fccc88;
    padding: 5px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat.

Sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Leva in desna poravnava z float

Bločne elemente lahko levo in desno poravnamo tudi z uporabo float:

<div class="desno">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. 
      Quisque venenatis metus id urna placerat.</p>
   <p>Sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
.desno {
    float: right;
    width: 60%;
    background-color: #fccc88;
    padding: 5px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat.

Sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.