มีแอตทริบิวต์การจัดตำแหน่งซึ่งมีหน้าที่รับผิดชอบในการวางตำแหน่งคอนเทนเนอร์บนเพจ คุณลักษณะนี้มีค่า left , center , right มาเขียนโค้ดเพื่อวางองค์ประกอบในส่วนต่างๆ ของเบราว์เซอร์:

ในบทความนี้คุณได้เรียนรู้ จัดแนวข้อความบนหน้า html.

เนื้อหาบางส่วนในส่วนนี้อาจใช้ไม่ได้กับบางภาษา

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

จัดข้อความให้อยู่ตรงกลาง

การจัดแนวข้อความให้มีความกว้าง

การกระจายตัวของข้อความ

บนแท็บ บ้านในกลุ่ม ย่อหน้าเลือกทำอย่างใดอย่างหนึ่งต่อไปนี้:

งาน	ทีม
จัดข้อความชิดซ้าย
การจัดตำแหน่งข้อความตรงกลาง	จัดข้อความให้อยู่ตรงกลาง

การจัดแนวข้อความให้มีความกว้าง

จัดข้อความชิดซ้าย กึ่งกลาง หรือขวา

คลิกที่ใดก็ได้ในย่อหน้าที่คุณต้องการจัดแนว

บนแท็บ บ้านวี ย่อหน้าเลือกทำอย่างใดอย่างหนึ่งต่อไปนี้:

งาน	ทีม
จัดข้อความชิดซ้าย	จัดข้อความชิดซ้าย
จัดข้อความให้อยู่ตรงกลาง	จัดข้อความให้อยู่ตรงกลาง
จัดข้อความชิดขวา	การจัดข้อความให้ชิดขวา

การจัดแนวข้อความให้มีความกว้าง

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

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

ความยุ่งเหยิงที่มองเห็นได้ภายในบล็อกข้อความ

ใช่ ใช่ ยิ่งขอบของบล็อกข้อความเรียบขึ้นเท่าไร ความยุ่งเหยิงด้านในก็จะยิ่งชัดเจนมากขึ้นเท่านั้น ในการพิมพ์ คลังเครื่องมือทั้งหมดช่วยให้คุณได้ข้อความที่สอดคล้องกัน: การใส่ยัติภังค์ การปรับระยะห่างระหว่างคำและระยะห่างระหว่างตัวอักษร และตัวเลือกแบบอักษรที่กว้างขึ้นหรือแคบลงเล็กน้อย แต่เลย์เอาต์ของหน้าอินเทอร์เน็ตแนะนำว่าตามกฎแล้วมีเพียงวิธีเดียวเท่านั้นที่จะ "ยืด" เส้นจากขอบหนึ่งไปอีกขอบหนึ่ง - การเพิ่มความกว้างของช่องว่างที่ไม่สามารถควบคุมได้ สิ่งนี้ไม่เพียงนำไปสู่การปรากฏตัวของช่องว่างที่ไม่น่าดูระหว่างคำเท่านั้น แต่ช่องว่างเหล่านี้ตามกฎแห่งความถ่อยมักจะตกลงที่ตำแหน่งเดียวกันโดยประมาณในแต่ละบรรทัด ก่อให้เกิดสิ่งที่เรียกว่า "แม่น้ำ" ในแนวดิ่ง ทั้งหมดนี้ทำให้ข้อความดูไม่เป็นระเบียบมาก

ไม่สามารถอ่านได้

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

จำเป็นต้องทำงานตามความยาวของบรรทัด ซึ่งมักจะไม่เกิดประโยชน์

ในความเป็นธรรม เป็นที่น่าสังเกตว่าข้อเสียที่ระบุของข้อความที่จัดชิดขอบสามารถลดลงได้โดยการเพิ่มความยาวบรรทัด อย่างไรก็ตาม วิธีนี้อาจไม่ได้ผลเสมอไป แต่สามารถลดความสามารถในการอ่านได้ด้วยความน่าจะเป็นในระดับสูง: เป็นการยากสำหรับดวงตาเมื่อสแกนบรรทัดยาวหนึ่งบรรทัดไปจนสุดเพื่อข้ามไปยังจุดเริ่มต้นของบรรทัดถัดไปอย่างแม่นยำและรวดเร็ว

ไม่เหมาะสำหรับอุปกรณ์มือถือ

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

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

ดังนั้น เมื่อสร้างหน้าอินเทอร์เน็ต สิ่งสำคัญคือต้องจำสิ่งสำคัญ: เว็บไซต์ไม่ใช่หนังสือ และคุณต้องเข้าถึงการออกแบบจากตำแหน่งที่กำหนดโดยเทคโนโลยีและจิตวิทยาของการรับรู้ ไม่ใช่จากมุมมองเชิงสุนทรีย์ของใครบางคน อย่างไรก็ตาม มีเงื่อนไขมาก เชื่อฉันเถอะว่าถ้าข้อความของคุณถูกวางไว้อย่างเรียบร้อยและก่อนอื่นอ่านได้ง่ายและมีความสุขจะไม่มีใครสนใจเรื่องเล็ก ๆ น้อย ๆ เช่นระยะขอบที่ไม่สม่ำเสมอ!

อย่างไรก็ตาม เมื่อคุณอ่านบทความนี้ คุณสังเกตเห็นหรือไม่ว่าข้อความนั้นไม่สมเหตุสมผล?

สวัสดี! เรายังคงเชี่ยวชาญพื้นฐานของภาษา HTML ต่อไป มาดูกันว่าคุณต้องเขียนอะไรเพื่อจัดแนวข้อความให้อยู่กึ่งกลาง ความกว้าง หรือขอบ

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

วิธีที่ 1 - ทำงานโดยตรงกับ HTML

จริงๆแล้วมันค่อนข้างง่าย ดูตัวอย่างด้านล่าง

จัดย่อหน้าให้อยู่ตรงกลาง

หากคุณต้องการย้ายส่วนของข้อความด้วยวิธีอื่น ให้ป้อนค่าต่อไปนี้แทนพารามิเตอร์ "center":

• justify – จัดข้อความให้พอดีกับความกว้างของหน้า;
• ขวา – บนขอบด้านขวา;
• ซ้าย - ไปทางซ้าย

ในการเปรียบเทียบ คุณสามารถย้ายเนื้อหาที่อยู่ในส่วนหัว (h1, h2) และคอนเทนเนอร์ (div)

วิธีที่ 2 และ 3 - การใช้สไตล์

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

บล็อกข้อความ

ในแบบฟอร์มนี้ รหัสจะถูกเขียนลงใน HTML โดยตรงเพื่อให้เนื้อหาข้อความอยู่ตรงกลาง

มีอีกวิธีอื่นในการบรรลุผล คุณจะต้องทำสองสามขั้นตอน

ขั้นตอนที่ 1 ในการเขียนโค้ดหลัก

วัสดุข้อความ

ขั้นตอนที่ 2 ในไฟล์ CSS ที่รวมไว้ ให้ป้อนรหัสต่อไปนี้:

Rovno (จัดแนวข้อความ:กึ่งกลาง;)

ฉันสังเกตว่าคำว่า "rovno" เป็นเพียงชื่อของคลาสที่สามารถเรียกต่างกันได้ ทั้งนี้ขึ้นอยู่กับดุลยพินิจของโปรแกรมเมอร์

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

เพียงไม่กี่คำถาม:

• คุณกำลังทำโครงการที่ไม่แสวงหาผลกำไรด้านข้อมูลหรือไม่?
• คุณต้องการให้เว็บไซต์ของคุณมีอันดับที่ดีในเครื่องมือค้นหาหรือไม่?
• คุณต้องการหารายได้ออนไลน์หรือไม่?

หากคำตอบทั้งหมดเป็นเชิงบวก ให้ดูที่แนวทางบูรณาการในการพัฒนาเว็บไซต์ ข้อมูลจะมีประโยชน์อย่างยิ่งหากทำงานบน WordPress CMS

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

คุณเคยทำงานในด้านอนุญาโตตุลาการจราจร การเขียนคำโฆษณา และกิจกรรมอื่น ๆ ที่สร้างรายได้หลักหรือรายได้เพิ่มเติมผ่านการทำงานร่วมกันระยะไกลหรือไม่? คุณสามารถเรียนรู้เกี่ยวกับสิ่งนี้และอีกมากมายในหน้าบล็อกของฉัน

ฉันจะเผยแพร่ข้อมูลที่เป็นประโยชน์มากมายในอนาคต เชื่อมต่ออยู่เสมอ หากต้องการ คุณสามารถสมัครรับข้อมูลอัพเดตของ Workip ทางอีเมลได้ แบบฟอร์มสมัครสมาชิกอยู่ด้านล่าง

การจัดแนวข้อความจะกำหนดลักษณะที่ปรากฏและการวางแนวของขอบย่อหน้า และสามารถจัดชิดซ้าย ขวา กึ่งกลาง หรือจัดชิดขอบได้ ในตาราง รูปที่ 1 แสดงตัวเลือกสำหรับการจัดแนวบล็อกข้อความ

โต๊ะ 1. วิธีจัดแนวข้อความ

การจัดตำแหน่งด้านซ้าย	การจัดตำแหน่งที่ถูกต้อง	การจัดตำแหน่งกึ่งกลาง	การให้เหตุผล
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

โปรดทราบว่าเมื่อใช้เหตุผล อาจมีการเว้นวรรคขนาดใหญ่ระหว่างคำในข้อความซึ่งไม่น่าดึงดูดใจนัก

โดยทั่วไปแท็กย่อหน้าจะใช้เพื่อตั้งค่าการจัดแนวข้อความ