CSS3 - Poravnanja (Alignment)

Poravnanje teksta

Tekst unutar elemenata na nivou bloka može se poravnati pravilnim postavljanjem poravnanja teksta. 

h1 {
    text-align: center;
}
p {
    text-align: left;
}

Pogledajte lekciju o CSS tekstu da biste saznali više o oblikovanju teksta.


Poravnanje po sredini pomoću svojstva margine

Centralno poravnanje elementa na nivou bloka jedna je od najvažnijih implikacija CSS svojstva margine. Na primjer, blok <div> može se poravnati vodoravno po sredini postavljanjem lijeve i desne margine na auto. 

div {
    width: 50%;
    margin: 0 auto;
}

Pravila stila u gornjem primjeru centriraju element <div> vodoravno.


Poravnavanje elemenata pomoću svojstva položaja

Položaj CSS-a u kombinaciji sa svojstvom lijevo, desno, gore i dole (eng. left, right, top and bottom) može se koristiti za poravnavanje elemenata u odnosu na okvir za prikaz dokumenta ili koji sadrži nadređeni element. 

.up {
    position: absolute;
    top: 0;
}
.down {
    position: absolute;
    bottom: 0;
}

Da biste saznali više o elementima pozicioniranja, pogledajte lekciju o CSS pozicioniranju.


Lijevo i desno poravnanje pomoću plutajućeg (float) svojstva

CSS svojstvo float može se koristiti za poravnavanje elementa lijevo ili desno od bloka koji sadrži blok na takav način da drugi sadržaj može teći duž njegove strane. Dakle, ako je element plutao lijevo, sadržaj će teći duž njegove desne strane. Suprotno tome, ako se element postavi u desno, sadržaj će teći duž njegove lijeve strane. 

div {
    width: 200px;
    float: left;
}

Brisanje lebdenja (float)

Jedna od najzbunjujućih stvari u radu s izgledima zasnovanim na plutanju je nadređeni element. Nadređeni element se ne rasteže automatski kako bi prihvatio plutajuće elemente. Iako to nije uvijek očito, ako roditeljski element ne sadrži nikakvu vizuelno uočljivu pozadinu ili obrube, ali važno je biti svjestan i s tim se mora pozabaviti kako bi se sprječio neobičan izgled i problem s više pretraživača. Pogledajte ilustraciju ispod:



Možete vidjeti da se element <div> ne rasteže automatski kako bi prilagodio plutajuće slike. Ovaj se problem može riješiti brisanjem plutajućeg slova nakon plutajućih elemenata u box-su, ali prije zaključne oznake elementa box-sa.


Postavljanje Collapsed Parent

Postoji nekoliko načina za rješavanje problema s nadređenim CSS-om. Sljedeći dio opisaće vam ova rješenja zajedno sa primjerima.


Rješenje 1: Plutajući kontejner (Float the Container)

Najlakši način da riješite ovaj problem je plutajući matični element koji sadrži. 

.container {
    float: left;
    background: #f2f2f2;
}

Pogledajmo primjer u praksi, da bismo razumjeli kako to funkcioniše. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer Clearing Floats</title>
<style>
    .container{
        float: left;
        background: yellow;
        border: 1px solid #c4884d;      
    }
    p {
        width: 200px;        
        margin: 10px;
        padding: 10px;
    }
    .red {
        float: left;       
        background: #ff0000;
    }
    .green {
        float: right;
        background: #00ff00;
    }
</style>
</head>
<body>
    <div class="container">
        <p class="red">Lijevo.</p>
        <p class="green">Desno.</p>
    </div>
</body>
</html>

Rješenje 2: Korištenje praznog elementa <div>

Ovo je staromodan način, ali je jednostavno rješenje i radi u svim pretraživačima. 

.clearfix {
    clear: both;
}
/* html code snippet */
<div class="clearfix"> </div>

Pogledajmo primjer u praksi, da bismo razumjeli kako to funkcioniše. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer Clearing Floats</title>
<style>
    .container{
        background: yellow;
        border: 1px solid #c4884d;      
    }
    .clearfix {
        clear: both;
        visibility: hidden;
        height: 0;
    }
    p {
        width: 200px;        
        margin: 10px;
        padding: 10px;
    }
    .red {
        float: left;       
        background: #ff0000;
    }
    .green {
        float: right;
        background: #00ff00;
    }
</style>
</head>
<body>
    <div class="container">
        <p class="red">Ljevo.</p>
        <p class="green">Desno.</p>
        <div class="clearfix">&nbsp;</div>
    </div>
</body>
</html>

To možete učiniti i pomoću <br> oznake, ali ova metoda se ne preporučuje jer dodaje nesemantički kod u vaše oznake.


Rješenje 3: Korištenje :after pseudo-elementa

Pseudo element :after zajedno sa svojstvom content prilično se često koristi za rješavanje problema s čišćenjem plutajućeg problema. 

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Pogledajmo primjer u praksi, da bismo razumjeli kako to funkcioniše. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer clearing floats</title>
<style>
    .container{
        background:yellow;
        border: 1px solid #000000;      
    }
    .clearfix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .container div {
        width: 200px;        
        margin: 10px;
        padding: 10px;
    }
    div.red {
        float: left;       
        background: #ff0000
    }
    div.green {
        float: right;
        background: #00ff00;
    }
</style>
</head>
<body>
    <div class="container clearfix">
        <div class="red">Ljevo.</div>
        <div class="green">Desno.</div>
    </div>
    <p><strong>Upozorenje:</strong>Internet Explorer 7 i starije verzije ne 
    podržavaju tag <code>:after</code> pseudo element.
    IE8 podržava, ali zahtjeva <code>!DOCTYPE</code> deklaraciju.</p>
</body>
</html>

Klasa .clearfix primjenjuje se na bilo koji kontejner koji ima plutajuće podređene dijelove.