Poravnava bločnih elementov s CSS

Vodoravna poravnava elementov je pomemben del postavitve spletne strani. Pri bločnih elementih jo lahko dosežemo na več načinov, pri čemer so nekateri prijemi primernejši za splošno postavitev, drugi pa predvsem za posebne primere.

Bločni element običajno zavzame vso razpoložljivo širino vrstice in se začne v novi vrstici. Primeri takih elementov so <h1>, <p>, <div> in številni drugi. Za poravnavo pogosto uporabimo margin ali flex, medtem ko sta position in float navadno bolj specializirani rešitvi.

Osnovna pravila

• Bločni elementi se običajno začnejo v novi vrstici.
• Če imajo privzeto širino celotne vrstice, vodoravna poravnava pogosto ni vidna.
• Za sredinsko poravnavo elementa z določeno širino je pogosta rešitev margin-left: auto; in margin-right: auto;.
• Za poravnavo znotraj nadrejenega elementa je zelo uporabna tudi postavitev flex.
• position in float lahko poravnata element, vendar praviloma nista prva izbira za splošno postavitev vsebine.

Vodoravna sredinska poravnava z margin

Bločni element sredinsko poravnamo tako, da nastavimo levi in desni zunanji odmik na auto. S tem se prosti prostor na levi in desni strani enakomerno razdeli. Da poravnava deluje, mora imeti element določeno širino, ki je manjša od širine nadrejenega elementa.

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

Vodoravna poravnava z flex

Sodobna in zelo uporabna rešitev za poravnavo elementov je uporaba nadrejenega elementa z lastnostjo display: flex. Če želimo otroški element poravnati na sredino, uporabimo justify-content: center. Ta pristop je posebej primeren, kadar poravnavamo več elementov ali želimo kombinirati vodoravno in navpično poravnavo.

<div class="ovoj">
   <div class="center-flex">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Sed aliquet metus tempor. Interdum et malesuada.</p>
   </div>
</div>

.ovoj {
    display: flex;
    justify-content: center;
}

.center-flex {
    width: 60%;
    background-color: #fccc88;
    padding: 5px;
}

Prednost te rešitve je, da lahko z istim pristopom enostavno poravnamo tudi več elementov ali dodamo še navpično poravnavo.

Vodoravna poravnava z position

Bločne elemente lahko vodoravno poravnamo tudi z absolutnim pozicioniranjem, na primer na desni rob. Pri tem moramo vedeti, da absolutno pozicioniran element ni več v običajnem toku dokumenta. Zato je ta pristop uporaben predvsem za posebne primere, ne pa kot splošna rešitev za poravnavo vsebine.

<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: 0;
    width: 60%;
    background-color: #fccc88;
    padding: 5px;
}

Leva in desna poravnava z float

Bločne elemente lahko levo ali desno poravnamo tudi z uporabo float. Ta pristop je danes manj pogost za splošno postavitev strani, saj ga večinoma uporabljamo predvsem za oblivanje besedila okoli slik ali podobnih elementov. Kljub temu je še vedno koristno poznati njegovo delovanje.

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

Primerjava načinov poravnave

Priporočila

• Za sredinsko poravnavo enega elementa z določeno širino pogosto zadošča margin-left: auto; in margin-right: auto;.
• Za sodobno poravnavo znotraj nadrejenega elementa pogosto uporabi flex.
• position uporabi predvsem takrat, ko želiš element postaviti natančno na določeno mesto.
• float uporabi predvsem pri posebnih primerih, ne pa kot prvo izbiro za splošno postavitev strani.
• Vedno preveri, ali poravnava velja za element ali samo za njegovo notranje besedilo.

Pogoste napake

• Pri sredinski poravnavi z margin: auto element nima določene širine, zato učinek ni viden.
• Zamenjuje se poravnava elementa z lastnostjo text-align, ki v resnici poravna besedilo.
• Lastnost justify-content se določa na napačnem elementu namesto na nadrejenem flex elementu.
• Absolutno pozicioniranje se uporablja kot splošna rešitev za postavitev, čeprav element zapusti običajni tok dokumenta.
• float se uporablja tam, kjer bi bila primernejša sodobnejša postavitev z uporabo flex.