ในยุคของเค้าโครงตาราง ไม่จำเป็นต้องคิดมากเกินไปเกี่ยวกับการจัดกึ่งกลางแนวตั้ง ในเซลล์ ค่าเริ่มต้นคือการจัดกึ่งกลางแนวตั้ง ดำเนินการเค้าโครงหน้าเว็บ CSS เพื่อให้แบบฟอร์มมีการเปลี่ยนแปลง ข้อความจะอยู่ที่ด้านบนของคอนเทนเนอร์ตามค่าเริ่มต้น
ดังที่แสดงด้านล่าง:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <หัว> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #คุณจิน { ความกว้าง:500px; ความสูง:200px; เส้นขอบ:1px ทึบ #03c; การจัดตำแหน่งข้อความ: กึ่งกลาง; - </สไตล์> </หัว> <ร่างกาย> <div id="MrJin"><a href="http://www.52CSS.com/">การออกแบบเว็บ CSS</a></div> </ร่างกาย> </html> |
ในกรณีนี้จะจัดกึ่งกลางข้อความในแนวตั้งได้อย่างไร? แบ่งออกเป็น 3 สถานการณ์ คือ
1. หากเป็นข้อความบรรทัดเดียว คุณสามารถใช้ระยะห่างบรรทัดเพื่อแก้ไขปัญหาได้
เราเพิ่มคำจำกัดความของระยะห่างบรรทัดเพื่อให้ได้รับเอฟเฟกต์การจัดกึ่งกลางข้อความบรรทัดเดียวในแนวตั้ง
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <หัว> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #คุณจิน { ความกว้าง:500px; ความสูง:200px; เส้นขอบ:1px ทึบ #03c; การจัดตำแหน่งข้อความ: กึ่งกลาง; ความสูงของบรรทัด:200px; - </สไตล์> </หัว> <ร่างกาย> <div id="MrJin"><a href="http://www.52CSS.com/">การออกแบบเว็บ CSS </a></div> </ร่างกาย> </html> |
2. ถ้าเป็นข้อความหลายบรรทัด คอนเทนเนอร์หลักจะไม่มีความสูงคงที่
เราสามารถใช้ช่องว่างภายในเพื่อแก้ไขปัญหาได้
ตั้งค่าช่องว่างภายในของคอนเทนเนอร์ให้เป็นค่าคงที่เดียวกัน และความสูงของคอนเทนเนอร์จะเพิ่มขึ้นเมื่อเนื้อหาเพิ่มขึ้น
ใช้ตัวเลือกนี้เพื่อให้ข้อความหลายบรรทัดอยู่ตรงกลางแนวตั้ง
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <หัว> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.52CSS.com</title> <style type="text/css"> #คุณจิน { ความกว้าง:500px; การขยาย:50px 0; เส้นขอบ:1px ทึบ #03c; การจัดตำแหน่งข้อความ: กึ่งกลาง; - </สไตล์> </หัว> <ร่างกาย> <div id="MrJin"><p><a href="http://www.52CSS.com/">การออกแบบเว็บ CSS </p><p>เรามุ่งมั่นที่จะขับเคลื่อนเว็บไซต์ของจีน! </a></p></div> </ร่างกาย> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <หัว> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #คุณจิน { ความกว้าง:500px; การขยาย:50px 0; เส้นขอบ:1px ทึบ #03c; การจัดตำแหน่งข้อความ: กึ่งกลาง; - </สไตล์> </หัว> <ร่างกาย> <div id="MrJin"><a href="http://www.52CSS.com/"> <p>การออกแบบเว็บ CSS</p> <p>ไซต์ผู้ดูแลเว็บของจีน</p> <p>เรามุ่งมั่นที่จะขับเคลื่อนเว็บไซต์ของจีน! </p> </a></div> </ร่างกาย> </html> |