...

...

...

ไม่เยื้องด้านล่างหรือด้านบนเนื่องจากไม่พอดีกับย่อหน้า

ในส่วนของคำถาม CSS: จะจัดบล็อก (div) ไปทางขวาได้อย่างไร? มอบให้โดยผู้เขียน เค็มเล็กน้อยคำตอบที่ดีที่สุดคือ คุณสามารถทำเช่นนี้ได้
__
9.5.1 การวางตำแหน่งวัตถุลอย: คุณสมบัติ "ลอย"
"ลอย"
ค่า: ซ้าย ขวา ไม่มีการสืบทอด
ค่าเริ่มต้น: ไม่มี
ขอบเขต: วัตถุที่สามารถเคลื่อนย้ายได้ทั้งหมดและเนื้อหาที่สร้างขึ้น
มรดก: ไม่
การกำหนดเปอร์เซ็นต์: N/A
อุปกรณ์: การจัดรูปแบบภาพ
คุณสมบัตินี้กำหนดว่าจะย้ายบล็อกไปทางซ้าย ขวา หรือไม่ย้ายเลย สามารถตั้งค่าสำหรับองค์ประกอบที่สร้างบล็อกที่ไม่สามารถวางตำแหน่งได้อย่างแน่นอน ค่าของคุณสมบัตินี้มีความหมายดังต่อไปนี้:
ซ้าย
องค์ประกอบสร้างบล็อกโครงสร้างที่ถูกย้ายไปทางซ้าย เนื้อหาจะแสดงทางด้านขวาของบล็อก โดยเริ่มจากด้านบนสุด (เนื่องจากคุณสมบัติ "ชัดเจน") คุณสมบัติ "display" จะถูกละเว้น เว้นแต่จะถูกตั้งค่าเป็น "none"
ขวา
คล้ายกับค่า "left" โดยมีความแตกต่างเพียงอย่างเดียวคือเนื้อหาจะแสดงทางด้านซ้ายของบล็อก โดยเริ่มจากด้านบนสุด
ไม่มี
บล็อกไม่เคลื่อนที่

คำตอบจาก คิริลล์ก็แค่คิริลล์[คุรุ]
float: ขวาในโค้ดดูเหมือนชื่อ CCS นี้ ชื่อคลาส (float: ขวา)

คำตอบจาก เอ็มมานูเอล โกลด์สตีน[คุรุ]
#your_id (float: right;width: your_size; (รองรับเป็นเปอร์เซ็นต์)height: your_size; (รองรับเป็นเปอร์เซ็นต์) )

คำตอบจาก นิทาน[คล่องแคล่ว]
ขอบซ้าย: ควรใช้อัตโนมัติ - ไม่จำเป็นต้องรีเซ็ตการตัดคำหลังบล็อก

คำตอบจาก ไอบีม[มือใหม่]
ไม่มีคลาสใด ๆ 🙂 div align="right"

คุณสามารถใช้คุณสมบัติการจัดแนวตั้งกับองค์ประกอบข้อความได้ แต่จะทำการจัดตำแหน่งในแนวตั้งซึ่งไม่สัมพันธ์กับองค์ประกอบภายนอก แต่สัมพันธ์กับเส้นฐาน ดังนั้นคุณสมบัตินี้จึงไม่สะดวกในการใช้สำหรับการจัดแนวข้อความ

เซลล์ตาราง

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

จัดแนวตั้ง: ตรงกลาง - ตรงกลาง (ค่าเริ่มต้น)

แนวตั้ง: ด้านบน - ตามแนวขอบด้านบน

จัดแนวตั้ง: ด้านล่าง - ตามขอบด้านล่าง

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

สไตล์:

11 12 13 14 15 16

td ( เส้นขอบ: 1px สีแดงทึบ; ความกว้าง: 200px; ความสูง: 180px; )

รหัส HTML:

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

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

ตัวอย่างรายการสไตล์:

P ( การจัดข้อความ: ซ้าย; )

ค่าซ้าย ขวา และกึ่งกลาง ข้อความที่จัดชิดซ้ายมักจะดูดีบนหน้าเว็บและอ่านง่าย ตามกฎแล้วการจัดตำแหน่งที่ถูกต้องในภาษายุโรปนั้นไม่ค่อยได้ใช้ แต่ไม่สามารถเรียกได้ว่าไร้ประโยชน์โดยสิ้นเชิง: สไตล์นี้มีประโยชน์สำหรับการออกแบบคำบรรยายสำหรับภาพถ่ายหรือเครื่องหมายคำพูดอย่างสวยงาม การจัดแนวเนื้อหาของเซลล์ตารางหรือส่วนเล็ก ๆ ของข้อความ ค่ากลางมักใช้เพื่อจุดประสงค์เดียวกัน ค่า justify ข้อความ Justify ใน CSS สามารถใช้กับหน้าที่พิมพ์ได้ แต่ไม่แนะนำให้ใช้สไตล์นี้บนเว็บเพจที่ออกแบบมาสำหรับการดูแบบดิสเพลย์ ทำไม เมื่อมองแวบแรก ข้อความที่จัดชิดขอบจะดูดีและสม่ำเสมอเหมือนคอลัมน์ในหนังสือพิมพ์ แต่หากต้องการขยายข้อความในลักษณะนี้ เบราว์เซอร์จะต้องเพิ่มช่องว่างระหว่างคำ ซึ่งอาจทำให้เกิดช่องว่างที่ไม่น่าดูในข้อความซึ่งทำให้อ่านยาก ในโปรแกรมที่ออกแบบมาเพื่อเตรียมข้อมูลสำหรับการพิมพ์ มีการปรับระยะห่างในข้อความได้ละเอียดกว่ามากและมักใช้การตัดคำ ซึ่งไม่มีในเบราว์เซอร์จำนวนมาก ดังนั้นจึงจำเป็นต้องตรวจสอบว่าข้อความที่ถูกต้องปรากฏบนหน้าเว็บอย่างไร และคำถามแรกที่ต้องถามตัวเองคือ อ่านง่ายไหม โดยเฉพาะอย่างยิ่งสำหรับกลุ่มข้อความที่แคบ (รวมถึงหน้าเว็บเวอร์ชันมือถือ) ค่าเริ่มต้นและสิ้นสุด ค่าเริ่มต้นและสิ้นสุดสำหรับคุณสมบัติการจัดแนวข้อความถูกนำมาใช้ใน CSS3 และทำงานเหมือนกับซ้ายและขวามาก แต่มีความแตกต่าง ด้วยการใช้ค่าเริ่มต้นกับข้อความที่วิ่งจากซ้ายไปขวา (LTR) การจัดตำแหน่งจะอยู่ทางซ้าย (ตามลำดับ สำหรับข้อความที่วิ่งจากขวาไปซ้าย (RTL) การจัดตำแหน่งจะอยู่ทางขวา) เป็นตรรกะที่ค่าสิ้นสุดทำงานในลักษณะตรงกันข้าม (นั่นคือ จัดข้อความ LTR ชิดขวาและข้อความ RTL ชิดซ้าย) บางเบราว์เซอร์ไม่รองรับค่าทั้งสองนี้ รวมถึง Internet Explorer ดังนั้น เว้นแต่คุณจำเป็นต้องใช้ค่าเหล่านี้จริงๆ เราขอแนะนำให้ใช้ค่าซ้ายและขวา

ภาพหน้าจอแสดงตัวอย่างการใช้ค่าที่แตกต่างกันสำหรับคุณสมบัติการจัดแนวข้อความ CSS:

ภาพหน้าจอ 1: จัดข้อความ LTR ไปทางซ้ายโดยใช้ค่าเริ่มต้น รูปลักษณ์ที่คล้ายกันสามารถทำได้โดยใช้ค่าด้านซ้าย
ภาพหน้าจอ 2: การจัดข้อความ LTR ไปทางขวาโดยใช้ค่าสิ้นสุด สามารถสร้างรูปลักษณ์ที่คล้ายกันได้โดยใช้ค่าที่เหมาะสม
ภาพหน้าจอ 3: การจัดแนวข้อความให้มีความกว้าง ด้วยแบบอักษรขนาดเล็กและความกว้างของหน้า/บล็อกขนาดใหญ่ ตัวเลือกสำหรับการจัดแนวข้อความบนหน้าเว็บจึงถือว่ายอมรับได้
ภาพหน้าจอ 4: ขนาดตัวอักษรเพิ่มขึ้นและความกว้างของบล็อกลดลงเมื่อเทียบกับตัวอย่างก่อนหน้า อย่างที่คุณเห็น มีช่องว่างที่น่าเกลียดปรากฏขึ้นในข้อความ (ขีดเส้นใต้ด้วยเส้นสีแดง)
ภาพหน้าจอ 5: สองวิธีในการจัดแนวข้อความโดยใช้ตัวอย่างบทช่วยสอนเวอร์ชันมือถือ (ทางซ้าย - การจัดข้อความ: ซ้าย ทางด้านขวา - การจัดข้อความ: จัดชิดขอบ) ลองอ่านข้อความในทั้งสองคอลัมน์แล้วพิจารณาว่าตัวเลือกใดสะดวกกว่าในการอ่าน

การจัดตำแหน่งของข้อความจะเป็นตัวกำหนด รูปร่างและการวางแนวของขอบย่อหน้าและสามารถซ้าย ขวา กึ่งกลาง หรือชิดขอบได้ ในตาราง รูปที่ 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.

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

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

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