CSS fungsi property Text-Align serta Valuenya

text-align adalah salah satu property pada css, sedangkan fungsinya untuk membuat perataan pada text, value text-antara lain left, right center fungsi value ini adalah

Tidak ada masa depan yang gemilang bagi mereka yang telah kehilangan pengharapan dan imannya. Samuel Rutherford

text-align adalah salah satu property pada css, sedangkan fungsinya untuk membuat perataan pada text, value text-antara lain left, right center fungsi value ini adalah

Last Modif at July 10th, 2011

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
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
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
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

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

contoh text-align dalam internal style kompleks

perhatikan code dibawah

<html>
<head>
<title>text-align css</title>
<meta content="indam url:http://www.indaam.net" 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.net" 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

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “CSS fungsi property Text-Align serta Valuenya”

  1. Rachmat says:

    Terima kasih, tidak ada yang namanya Ilmu tidak bermanfaat! pastilah sangat bermanfaat.

  2. ferdi says:

    saya mau tanya mas kalau kita mau mengatur text misalkan textnya kita atur 5px dari kiri, 15px dari dan sebagainya itu gimana caranya ya mas. kadang saya menggunakan margin-left untuk mengaturnya tetapi backgroundnya juga terikut. kira kira bagaimana ya cara nya mas,,, kalo sempat bales juga ke emailku ya mas thanks,,,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-