การใช้ text-align เพื่อจัดข้อความ

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

การใช้ text-align เพื่อจัดข้อความ

Post by bankjittapol » 22/11/2019 6:28 pm

การใช้ text-align เพื่อจัดข้อความ
text-align คือ เป็นหนึ่งใน คำสั่งของ css ที่เกี่ยวกับข้อความ ซึ่งคำสั่ง text-align นั้นใช้ในการจัดชุดข้อความให้เป็นไปตามที่เราต้องการ เช่นอยากให้ข้อความชิดซ้าย หรืออยากให้ข้อความอยู่ตรงกลาง หรือแม้กระทั่ง จัดให้ข้อความนั้นกระจายให้ทั่วกรอบข้อความที่เราได้กำหนดไว้ ก็สามารถทำได้เช่นกัน ซึ่ง text-align เป็นคำสั่งที่ใช้ทุกครั้งที่มีชุดข้อความมาเกี่ยวข้อง โดยสามารถจัดข้อความได้ถึง 4 รูปแบบ ดังนี้

systax ที่ใช้

Code: Select all

text-align:left;
text-align:right;
text-align:center;
text-align:justify;
text-align:initial;
left คือ การจัดข้อความให้ชิดด้านซ้าย ซึ่งค่านี้จะเป็นค่าพื้นฐานของการจัดข้อความ
right คือ การจัดข้อความให้ชิดด้านขวา
center คือ การจัดข้อความให้อยู่ตรงกลาง
justify คือ การจัดข้อความให้ชิดทั้งสองด้าน
initial คือ การกำหนดให้เป็นค่าเริ่มต้น

ตัวอย่างการใช้งาน

Code: Select all

<style>
div.a { text-align: left; }
div.b { text-align: right; }
div.c { text-align: center; } 
div.d { text-align: justify; } 
div.e { text-align: initial; } 
</style>

Code: Select all

<div class="a"><h2>ใช้ text-align: left;</h2></div>
<div class="b"><h2>ใช้ text-align: right;</h2></div>
<div class="c"><h2>ใช้ text-align: center;</h2></div>
<div class="d"><h2>ใช้ text-align: justify;   </h2></div>
<div class="e"><h2>ใช้ text-align: initial;</h2></div>
ผลลัพธ์ที่ได้

Image

Image

Image

Image

Image

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 6 guests