การ จัดตำแหน่งข้อความ CSS
การจัดตำแหน่งข้อความ
คุณสมบัติtext-alignนี้ใช้เพื่อตั้งค่าการจัดแนวข้อความในแนวนอน
ข้อความสามารถจัดชิดซ้ายหรือขวา จัดกึ่งกลาง หรือจัดชิดขอบได้
ตัวอย่างต่อไปนี้แสดงการจัดตำแหน่งกึ่งกลาง และการจัดตำแหน่งข้อความชิดซ้ายและขวา (การจัดตำแหน่งซ้ายเป็นค่าเริ่มต้นหากทิศทางข้อความเป็นซ้ายไปขวา และการจัดตำแหน่งขวาเป็นค่าเริ่มต้นหากทิศทางข้อความเป็นแบบขวาไปซ้าย):
ตัวอย่าง
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
เมื่อtext-alignตั้งค่าคุณสมบัติเป็น "justify" แต่ละบรรทัดจะยืดออกเพื่อให้ทุกบรรทัดมีความกว้างเท่ากัน และระยะขอบซ้ายและขวาเป็นเส้นตรง (เช่น ในนิตยสารและหนังสือพิมพ์):
ตัวอย่าง
div {
text-align: justify;
}
Text Align Last
คุณสมบัติtext-align-lastระบุวิธีการจัดแนวบรรทัดสุดท้ายของข้อความ
ตัวอย่าง
จัดบรรทัดสุดท้ายของข้อความในสาม <p> องค์ประกอบ:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
ทิศทางข้อความ
สามารถใช้ คุณสมบัติdirectionและ
unicode-bidiเพื่อเปลี่ยนทิศทางข้อความขององค์ประกอบ:
ตัวอย่าง
p {
direction: rtl;
unicode-bidi: bidi-override;
}
การจัดแนวแนวตั้ง
คุณสมบัติvertical-alignตั้งค่าการจัดตำแหน่งแนวตั้งขององค์ประกอบ
ตัวอย่าง
ตั้งค่าการจัดตำแหน่งแนวตั้งของรูปภาพในข้อความ:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}