ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติต่อไปนี้:
text-aligntext-align-lastdirectionunicode-bidivertical-alignคุณสมบัติ text-align ใช้เพื่อกำหนดการจัดตำแหน่งแนวนอนของข้อความ
ข้อความสามารถจัดชิดซ้ายหรือขวา จัดกึ่งกลาง หรือจัดชิดขอบได้
ตัวอย่างต่อไปนี้แสดงข้อความที่จัดกึ่งกลาง และจัดชิดซ้ายและขวา (การจัดตำแหน่งซ้ายเป็นค่าเริ่มต้นหากทิศทางของข้อความเป็นแบบซ้ายไปขวาและทางขวา การจัดตำแหน่งเป็นค่าเริ่มต้นหากทิศทางของข้อความเป็นแบบขวาไปซ้าย):
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
เมื่อคุณสมบัติ text-align ถูกตั้งค่าเป็น "justify" แต่ละบรรทัดจะถูก ยืดให้ทุกบรรทัดมีความกว้างเท่ากันและมีระยะขอบซ้ายและขวา ตรง (เช่นในนิตยสารและหนังสือพิมพ์):
div {
text-align: justify;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>
</body>
</html>
text-align-last คุณสมบัติระบุวิธีการจัดแนวบรรทัดสุดท้ายของข้อความ
จัดบรรทัดสุดท้ายของข้อความในสาม <p> องค์ประกอบ:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<h1>The text-align-last Property</h1>
<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
</html>
ทิศทาง และ คุณสมบัติ unicode-bidi สามารถใช้เพื่อเปลี่ยนทิศทางข้อความขององค์ประกอบ:
p {
direction: rtl;
unicode-bidi: bidi-override;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
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;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
</body>
</html>
ระบุทิศทางของข้อความ/ทิศทางการเขียน
ระบุการจัดตำแหน่งแนวนอนของข้อความ
ระบุวิธีการจัดแนวบรรทัดสุดท้ายของข้อความ
ใช้ร่วมกับคุณสมบัติทิศทางเพื่อตั้งค่าหรือส่งคืนว่าควรแทนที่ข้อความเพื่อรองรับหลายภาษาในเอกสารเดียวกันหรือไม่
ตั้งค่าการจัดตำแหน่งแนวตั้งขององค์ประกอบ