จัดเรียงสิ่งต่าง ๆ ด้วยคุณสมบัติการจัดแนวข้อความ CSS

จัดเรียงสิ่งต่าง ๆ ด้วยคุณสมบัติการจัดแนวข้อความ CSS

คุณลักษณะแรกๆ ประการหนึ่งที่นักพัฒนาซอฟต์แวร์ทุกคนได้เรียนรู้เกี่ยวกับการประมวลผลคำคือการจัดตำแหน่งข้อความ เครื่องมือเล็กๆ นั้นมีความสำคัญต่อนักเรียงพิมพ์มืออาชีพและนักออกแบบใบปลิวสมัครเล่น ไม่น่าแปลกใจเลยที่ CSS รองรับการจัดตำแหน่งข้อความเมื่อพูดถึงการออกแบบเว็บ





NS text-align คุณสมบัติ ควบคู่ไปกับคุณสมบัติอื่นๆ อีก 1 หรือ 2 รายการ ควบคุมว่าองค์ประกอบจะจัดแนวข้อความอย่างไรในแนวนอน นอกเหนือจากพื้นฐาน เบราว์เซอร์จะค่อยๆ ปรับใช้ข้อกำหนดเพิ่มเติม แต่การสนับสนุนอย่างเต็มที่แตกต่างกันไป เรียนรู้วิธีจัดแนวข้อความและคุณลักษณะที่เบราว์เซอร์ทั่วไปสนับสนุนในปัจจุบัน



พื้นฐานของคุณสมบัติการจัดข้อความ CSS

การจัดตำแหน่งเป็นหนึ่งในเงื่อนไขการพิมพ์ที่คุ้นเคยมากที่สุด ในบริบทของ CSS text-align หมายถึงการจัดตำแหน่งแนวนอน





การจัดแนวข้อความแนวนอนใช้กับคอนเทนเนอร์แบบบล็อกเท่านั้น สิ่งเหล่านี้เป็นองค์ประกอบแบบเต็มความกว้าง เช่น ย่อหน้าและ divs ใช้ text-align คุณสมบัติบนองค์ประกอบแบบอินไลน์เช่น ใน จะไม่มีผล คุณยังสามารถจัดแนวรายการและเซลล์ตารางได้ดังนี้

google วิธีเปลี่ยนบัญชีเริ่มต้น

ตามค่าเริ่มต้น ในภาษาจากซ้ายไปขวา (เพิ่มเติมในภายหลัง) ข้อความจะจัดชิดซ้าย:



ใน CSS สิ่งนี้เหมือนกับ:

p { text-align: left; }

หรือ:



p { text-align: start; }

ที่เกี่ยวข้อง: Cascading Style Sheets คืออะไรและ CSS ใช้สำหรับอะไร?

คุณสามารถใช้ค่าอื่นๆ สำหรับค่า text-align คุณสมบัติเพื่อเปลี่ยนการจัดตำแหน่งแนวนอน ค่าทั่วไปส่วนใหญ่คุ้นเคยจากแอปประมวลผลคำ:



text-align: left
text-align: center
text-align: right

ใช้เหตุผลเพื่อจัดแนวขอบซ้ายและขวา

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

เมื่อคุณจัดแนวข้อความ บรรทัดสุดท้ายอาจเป็นเรื่องยุ่งยาก เนื่องจากอาจสั้นมาก (อาจเป็นเพียงคำเดียว) การเว้นวรรคตามความกว้างทั้งหมดอาจดูน่าเกลียด โดยค่าเริ่มต้น ข้อความที่จัดชิดขอบจะจัดแนวบรรทัดสุดท้ายไปทางซ้าย

วิธีทำให้ iphone 7 เข้าสู่โหมดการกู้คืน

บางครั้งคุณอาจต้องการเอฟเฟกต์ที่แตกต่างออกไป การใช้งานเบราว์เซอร์เป็นไปตามข้อกำหนด แต่เป็นไปได้สองวิธี

NS ให้เหตุผลทั้งหมด ค่าควรหมายความว่าเบราว์เซอร์ปฏิบัติต่อบรรทัดสุดท้ายเหมือนกับบรรทัดอื่น และขยายให้เต็มความกว้าง อย่างไรก็ตาม ในขณะที่เขียน ไม่มีเบราว์เซอร์ใดรองรับค่านี้ คุณสามารถ ตรวจสอบ caniuse เพื่อดูว่าพวกเขาทำหรือไม่ เมื่อคุณกำลังอ่านบทความนี้

คุณสมบัติ CSS อื่น text-align-last มีความยืดหยุ่นมากกว่าและมีการสนับสนุนที่ดีกว่า คุณสามารถรักษาได้มากหรือน้อยเช่นเดียวกับ text-align แต่ใช้กับบรรทัดสุดท้ายเท่านั้น:

การสนับสนุนเบราว์เซอร์สำหรับคุณสมบัตินี้ดีกว่า แต่ไม่สมบูรณ์แบบ อีกครั้ง, ตรวจสอบ caniuse ก่อนใช้งาน . หากเบราว์เซอร์ไม่รู้จักคุณสมบัตินี้ เบราว์เซอร์จะไม่สนใจคุณสมบัตินี้

การจัดตำแหน่งข้อความและทิศทางการอ่าน

คุณอาจกำลังทำงานกับภาษา เช่น อาหรับหรือฮีบรู ที่อ่านจากขวาไปซ้าย CSS ใช้ the ทิศทาง คุณสมบัติเพื่อระบุสิ่งนี้ ตัวอย่างเช่น:

direction: rtl;

ภาษาเหล่านี้มักจะจัดข้อความให้ชิดขวาโดยค่าเริ่มต้น

แทนที่จะต้องระบุ ซ้าย / ขวา วิธีที่ต้องการในการจัดแนวข้อความใช้ค่า เริ่ม และ จบ . สิ่งนี้ระบุว่าข้อความควรเรียงกันที่จุดเริ่มต้นของแต่ละบรรทัดหรือจุดสิ้นสุด ในภาษาจากซ้ายไปขวา เริ่ม เทียบเท่ากับ ซ้าย . ในภาษาจากขวาไปซ้าย ข้อความเริ่มต้นที่ด้านขวาและสิ้นสุดที่ด้านซ้าย

วิธีค้นหาที่อยู่ IP ของเครื่องพิมพ์

โดยใช้ เริ่ม หรือ จบ หมายความว่า การจัดตำแหน่งจะสอดคล้องกันโดยไม่คำนึงถึงทิศทางของข้อความ

วิธีที่องค์ประกอบสืบทอดคุณสมบัติการจัดตำแหน่งข้อความ

คุณควรตระหนักว่า text-align ทรัพย์สินที่สืบทอดมา ตัวอย่างเช่น หากคุณตั้งค่าไว้ที่ ร่างกาย องค์ประกอบจะนำไปใช้กับทุกองค์ประกอบในหน้า แน่นอน คุณสามารถแทนที่มันบนองค์ประกอบใดก็ได้

การใช้คุณสมบัติการจัดตำแหน่งข้อความเพื่อควบคุมเค้าโครง

คุณสามารถใช้ text-align คุณสมบัติ CSS เพื่อกำหนดวิธีที่เบราว์เซอร์จัดวางข้อความในแนวนอน ค่าที่พบบ่อยที่สุดคือ ซ้าย , ขวา , ศูนย์กลาง , และ ให้เหตุผล . สิ่งเหล่านี้ค่อนข้างตรงไปตรงมาแม้ว่า ให้เหตุผล นำเสนอความซับซ้อนบางอย่าง

คุณควรใช้การจัดตำแหน่งข้อความเท่าที่จำเป็น บนป้ายโฆษณาและโปสเตอร์ การจัดตำแหน่งตรงกลางอาจเหมาะสม แต่อาจทำให้บล็อกข้อความที่ยาวกว่านั้นอ่านยาก การให้เหตุผลมักจะอ่านง่ายกว่าเมื่อบรรทัดข้อความยาวขึ้น การจัดคอลัมน์ข้อความสั้นๆ ให้เหมาะสมสามารถสร้างระยะห่างที่น่าเกลียดได้

NS text-align คุณสมบัติเป็นหนึ่งในคุณสมบัติ CSS จำนวนมากที่มีการจัดรูปแบบที่เป็นประโยชน์และการวางตำแหน่งพื้นฐาน

แบ่งปัน แบ่งปัน ทวีต อีเมล 10 ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

ต้องการความช่วยเหลือเกี่ยวกับ CSS หรือไม่ ลองใช้ตัวอย่างโค้ด CSS พื้นฐานเหล่านี้เพื่อเริ่มต้น จากนั้นนำไปใช้กับหน้าเว็บของคุณเอง

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • การพัฒนาเว็บ
  • ออกแบบเว็บ
  • CSS
เกี่ยวกับผู้เขียน Bobby Jack(58 บทความเผยแพร่)

Bobby เป็นผู้ที่ชื่นชอบเทคโนโลยีซึ่งทำงานเป็นนักพัฒนาซอฟต์แวร์มาเกือบสองทศวรรษ เขาหลงใหลในการเล่นเกม ทำงานเป็นบรรณาธิการบทวิจารณ์ที่ Switch Player Magazine และหมกมุ่นอยู่กับทุกแง่มุมของการเผยแพร่ออนไลน์และการพัฒนาเว็บ

เพิ่มเติมจาก Bobby Jack

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก