การจัดตัวข้อความ CSS

การจัดตัวข้อความ

text-align เป็น属性ที่ใช้ตั้งค่าการจัดตัวข้อความระดับน้ำตกข้างนอก

ข้อความสามารถจัดตัวซ้าย ขวา หรือตรงกลางได้

ตัวอย่างดังนี้แสดงถึงการจัดตัวข้อความตรงกลางและจัดตัวข้อความซ้ายและขวา (ถ้าทิศทางข้อความเป็นจากซ้ายไปขวา จะเป็นการจัดตัวข้อความซ้ายเป็นเอกสตรีค์; ถ้าทิศทางข้อความเป็นจากขวาไปซ้าย จะเป็นการจัดตัวข้อความขวาเป็นเอกสตรีค์):

ตัวอย่าง

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

ทดลองด้วยตัวเอง

เมื่อ text-align จัดตัวค่าเป็น "justify" จะขยายแต่ละบรรทัด เพื่อทำให้แต่ละบรรทัดมีความกว้างเหมือนกัน และมีเมาะข้างซ้ายและข้างขวาเฉียบฉันท์ (เช่นเดียวกับในนิตยาสารและหนังสือพิมพ์):

ตัวอย่าง

div {
  text-align: justify;
}

ทดลองด้วยตัวเอง

แนวข้อความ

direction และ unicode-bidi สมบัตินี้สามารถใช้เพื่อเปลี่ยนแนวขององค์ประกอบต่างๆ

ตัวอย่าง

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

ทดลองด้วยตัวเอง

การปรับเปลี่ยนแนวตั้ง

vertical-align การตั้งค่าสมบัติเพื่อปรับเปลี่ยนวิธีปรับเปลี่ยนแนวตั้งขององค์ประกอบ

ตัวอย่างนี้แสดงว่ามีทางเช่นไรที่จะตั้งค่าการปรับเปลี่ยนแนวตั้งของรูปภาพในข้อความ

ตัวอย่าง

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

ทดลองด้วยตัวเอง