CSS text-align การจัดตัวของข้อความ
- หน้าที่แล้ว table-layout
- หน้าต่อไป text-align-last
definition and usage
属性text-align规定元素中的文本的水平对齐方式。
属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
ดูเพิ่มเติมที่:
ตัวอย่าง CSS:CSS ข้อความ
คู่มืออ้างอิง HTML DOM:property textAlign
ตัวอย่าง
ตั้งค่าวิธีการจัดตารางข้อความขององค์ประกอบ h1、h2、h3:
h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
CSS สyntax
text-align: left|right|center|justify|initial|inherit;
ค่าของอุปกรณ์
| ค่า | รายละเอียด |
|---|---|
| left | จัดตารางข้อความไปที่ด้านซ้าย。ค่าเริ่มต้น: กำหนดโดยเว็บเบราเซอร์。 |
| right | จัดตั้งข้อความให้อยู่ทางขวา |
| center | จัดตั้งข้อความให้อยู่ตรงกลาง |
| justify | ทำให้ข้อความทั้งสองข้างตรงข้าม |
| inherit | กำหนดให้สืบทอดค่า property text-align จากตัวองค์ประกอบพ่อ |
ค่า justify
คุณสมบัติตั้งตำแหน่งระดับนั้นที่สุดคือ justify ซึ่งมีปัญหาของตัวเอง
ค่า justify สามารถทำให้ข้อความทั้งสองข้างตรงข้ามเหมือนกัน。ในข้อความทั้งสองข้าง ขอบขวางของบรรยายข้อความจะติดตั้งที่ขอบด้านภายในของตัวองค์ประกอบพ่อ (parent element) และดังนั้นจะปรับปรุงช่องว่างระหว่างคำและตัวอักษรเพื่อที่ทำให้ยาวของบรรยายข้อความทุกบรรยายเหมือนกัน คุณอาจจะสังเกตว่าข้อความทั้งสองข้างในการพิมพ์มักใช้บ่อย แต่ใน CSS ควรค้นหามากกว่านี้。
ต้องดูเหมือนตัวแทนสำหรับผู้ใช้ (ไม่ใช่ CSS) จะตัดสินว่าจะขยายข้อความทั้งสองข้างเพื่อที่จะติดตั้งในช่องว่างที่มีทั้งสองข้างของตัวองค์ประกอบพ่อ (parent element) ตามตัวอย่าง บางบราวเซอร์อาจเพิ่มช่องว่างเพิ่มเติมระหว่างคำ ในขณะที่บราวเซอร์อื่นอาจแบ่งเพิ่มเติมระหว่างตัวอักษร (แต่มาตราฐาน CSS ชี้แจงเป็นนัยว่า ถ้า) property letter-spacingกำหนดเป็นค่ายาว，“ตัวแทนสำหรับผู้ใช้ไม่สามารถเพิ่มหรือลดช่องว่างระหว่างตัวอักษร”）。ยังมีตัวแทนสำหรับผู้ใช้ที่อาจลดช่องว่างของบรรยายข้อความบางบรรยายเพื่อที่จะทำให้ข้อความมีความเข้ากันมากขึ้น。ทั้งหมดนี้จะส่งผลกระทบต่อรูปแบบขององค์ประกอบและแม้กระทั่งความสูงของมัน ซึ่งขึ้นอยู่กับความส่งผลของตัวแทนสำหรับผู้ใช้ที่ทำให้บรรยายข้อความหลายบรรยาย
CSS ยังไม่ได้กำหนดว่าจะจัดการกับขีดหลังรวม (หมายเหตุ 1) ส่วนใหญ่ข้อความที่จัดตั้งเป็น alignment ทั้งสองข้างจะใช้ขีดหลังรวมแบ่งคำยาวเพื่อที่จะลดระยะห่างระหว่างคำ และปรับปรุงการดูของบรรยายข้อความเพิ่มเติม。อย่างไรก็ตาม เนื่องจาก CSS ไม่ได้กำหนดการจัดการขีดหลังรวม ตัวแทนสำหรับผู้ใช้ (user agent) ไม่มีโอกาสเพิ่มขีดหลังรวมอัตโนมัติ。ดังนั้น ข้อความที่จัดตั้งเป็น alignment ทั้งสองข้างใน CSS ดูไม่เหมือนที่เป็นตัวอย่างในการพิมพ์ โดยเฉพาะเมื่อตัวอย่างอาจมีขนาดเล็กมากเกินไปที่จะทำให้แต่ละบรรยายข้อความสามารถใส่ได้เพียงไม่กี่คำต่อบรรยายเดียวกัน โดยทางเลือกด้านเล็กนั้นสามารถใช้ได้ แต่ต้องระมัดระวังข้อเสียของมัน。
หมายเหตุ 1:CSS ไม่มีการชี้แจงว่าจะจัดการกับขีดหลังรวม (hyphen) เพราะมีกฎขีดหลังรวมที่แตกต่างกันในแต่ละภาษา。มาตราฐานไม่ได้พยายามต่อเนื่องกับกฎเหล่านี้ที่อาจไม่สมบูรณ์ แต่แทนที่นั้นก็ไม่ได้กล่าวถึงประเด็นนี้。
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | ถ้า property direction คือ ltr ค่าเริ่มต้นคือ left; ถ้า direction คือ rtl คือ right。 |
|---|---|
| การสืบทอด: | yes |
| รุ่น: | CSS1 |
| ระบบการใช้งาน JavaScript: | object.style.textAlign="right" |
ตัวอย่างเพิ่มเติม
- จัดตั้งตำแหน่งข้อความ
- ตัวอย่างแสดงว่าวิธีการจัดตั้งตำแหน่งของข้อความ
การสนับสนุนโดยบราวเซอร์
ตัวเลขในตารางบอกว่าบราวเซอร์ใดที่สนับสนุนคุณสมบัตินี้ครบชุด
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
- หน้าที่แล้ว table-layout
- หน้าต่อไป text-align-last
