^ HTML-linkkejä ja -vinkkejä
460 530 625
^ Sivun osia on näppärä sijoitella <div>-elementin ja CSS-koodauksen avulla. Alla olevassa esimerkissä on haluttu sijoittaa neljä tekstilohkoa 50 pikseliä leveisiin ja 40 pikseliä korkeisiin (näkymättömiin) ruutuihin, joissa teksti on keskitettynä:
HTML:
<style>
#tekstilohko1 {
width: 50px;
height: 40px;
float: left;
text-align: center;
}
</style>
<div id="tekstilohko1">1. lohko</div>
<div id="tekstilohko1">2. lohko</div>
<div id="tekstilohko1">3. lohko</div>
<div id="tekstilohko1">4. lohko</div>
Toisessa esimerkissä on tekstilohkot ovat 100 pikseliä leveitä, jolloin tekstit mahtuvat yhdelle riville:
HTML:
<style>
#tekstilohko1 {
width: 100px;
height: 40px;
float: left;
text-align: center;
}
</style>
<div id="tekstilohko1">1. lohko</div>
<div id="tekstilohko1">2. lohko</div>
<div id="tekstilohko1">3. lohko</div>
<div id="tekstilohko1">4. lohko</div>
Jos teksti halutaan keskittää myös pystysuunnassa, voidaan sitä yrittää määrittämällä elementin ylälaitaan tyhjä tila (padding):