text-align adalah salah satu property pada css, sedangkan fungsinya untuk membuat perataan pada text
value text-align
berikut value text-align
- left
- right
- center
- justify
contoh property text-align dalam inline style
text-align:left
fungsi value left adalah untuk membuat perataan kiri
contoh
<div style="clear:both;background-color:lime;width:500px;text-align:left;">
ini text align-left
ini text align-left
ini text align-left
ini text align-left
</div>
tampilanya seperti ini
ini text align-left
ini text align-left
ini text align-left
text-align:right
fungsi value right adalah untuk membuat perataan kanan
contoh
<div style="clear:both;background-color:lime;width:500px;text-align:right;">
ini text align-right
ini text align-right
ini text align-right
ini text align-right
</div>
tampilanya seperti ini
ini text align-right
ini text align-right
ini text align-right
text-align:center
fungsi value center adalah untuk membuat perataan tengah
contoh
<div style="clear:both;background-color:lime;width:500px;text-align:center;">
ini text align-center
ini text align-center
ini text align-center
ini text align-center
</div>
tampilanya seperti ini
ini text align-center
ini text align-center
ini text align-center
text-align:justifly
fungsi value justifly adalah untuk membuat perataan hingga ke ujung
contoh
<div style="clear:both;background-color:lime;width:500px;text-align:justifly;">
ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly ini text align-justifly
</div>
tampilanya seperti ini
contoh text-align dalam internal style kompleks
perhatikan code dibawah
<html>
<head>
<title>text-align css</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
body{background-color:pink;}
#misaltext-align1{
text-align:right;
}
#misaltext-align2{
text-align:left;
}
#misaltext-align3{
text-align:center;
}
#misaltext-align4{
text-align:justify;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misaltext-align1">
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
</div>
<div class="anggapsebagaikotak" id="misaltext-align2">
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
</div>
<div class="anggapsebagaikotak" id="misaltext-align3">
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
</div>
<div class="anggapsebagaikotak" id="misaltext-align4">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
<div style="clear:both;"></div>
<br/><br/><br/>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohtext-alingcss.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
semoga bermanfaat
Terima kasih, tidak ada yang namanya Ilmu tidak bermanfaat! pastilah sangat bermanfaat.