Mikä tahansa teksti voidaan tasata verkkosivulla vasemmalle, keskelle tai oikealle. Kuvia voidaan myös tasata verkkosivulla samalla tavalla kuin tekstiä. Alla on esimerkkejä tekstin ja kuvien tasaamisesta vasemmalle, sarkaimella, keskellä ja oikealle.
Jos jokin tekstin tasaus ei toimi, varmista, että muut elementtiin tai sen sisältävään elementtiin käytetyt CSS-tyylit eivät ole ristiriidassa määrittämäsi tasauksen kanssa.
Näillä esimerkeillä ja useimmilla tasauksilla teksti tasataan tekstin sisältävään elementtiin. Teksti voidaan keskittää HTML-div-kenttään ja tasata vasemmalle muulle verkkosivulle. Myös kaikki CSS-perustelun sisältävän tagin sisältämä (esim. kuva) tasataan.
Esimerkkejä kohdistamisesta
Tasattu vasemmalle
Tab tasattu
Keskitetty
Oikealle tasattuna
Vasemmalle tasattuna esimerkki
Oletusarvoisesti englanti ja muut kielet tasaavat tekstin vasemmalle. Jos kuitenkin haluat muuttaa elementtien kohdistusta, alla oleva koodi voidaan lisätä elementtiin tai CSS:ään.
HTML-koodi
<p style="text-align: left;">Left-aligned</p>
<p style="text-align: left;"><img src="example.jpg"></p>
Katso alla olevat lisävinkit elementin kohdistuksen, pehmusteen ja marginaalin säätämiseen.
Sarkaintasattu esimerkki
Vaikka “sarkain”-tekstin tasausta ei ole, vasemman marginaalin lisääminen antaa vaikutelman sarkaintasauksesta, kuten alla näkyy.
HTML-koodi
<p style="margin-left:2.5em;">Tab aligned</p>
<p style="margin-left:2.5em;"><img src="example.jpg"></p>
Katso alla olevat lisävinkit elementin kohdistuksen, pehmusteen ja marginaalin säätämiseen.
Keskustasattu esimerkki
Text-align-attribuutin avulla voit keskittää minkä tahansa tekstin tai kuvan elementtiin alla olevan esimerkin mukaisesti.
HTML-koodi
<p style="text-align: center;">Center-aligned</p>
<p style="text-align: center;"><img src="example.jpg"></p>
Katso alla olevat lisävinkit elementin kohdistuksen, pehmusteen ja marginaalin säätämiseen.
Oikealle tasattuna esimerkki
Text-align-attribuutin avulla voit keskittää minkä tahansa tekstin tai kuvan elementtiin alla olevan esimerkin mukaisesti.
HTML-koodi
<p style="text-align: right;">Right-aligned</p>
<p style="text-align: right;"><img src="example.jpg"></p>
Vaihtoehtoisesti voit käyttää CSS:ää tasataksesi kuvan oikealle verkkosivulla. Lisätietoja on artikkelissa: Kuvien luominen, jotka on tasattu Web-sivulla oikealle.
Katso alla olevat lisävinkit elementin kohdistuksen, pehmusteen ja marginaalin säätämiseen.
Muita kohdistusvinkkejä
Alla on muita kohdistusvinkkejä, joita voidaan soveltaa mihin tahansa yllä olevista tyylisäännöistä tai muihin CSS-luokkiin.
- Ylimääräinen marginaali voidaan lisätä mihin tahansa yllä olevista tyyleistä, jos tarvitset lisäsisennyksen tai haluat lisää täyttöä. Voit esimerkiksi käyttää marginaalioikeaa oikealle tasattuun esimerkkiin siirtääksesi tekstiä pidemmälle elementtiin.
- Jos haluat responsiivisemman sivun, muista säätää tai poistaa vasen tai oikea tasaus, kun katselet sitä pienemmällä näytöllä.
