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.