เมื่อพูดถึงปัญหานี้ บางคนอาจถามว่าไม่มีแอตทริบิวต์การจัดแนวแนวตั้งใน CSS เพื่อตั้งค่าการจัดกึ่งกลางแนวตั้งใช่หรือไม่ แม้ว่าเบราว์เซอร์บางตัวไม่รองรับ ฉันแค่ต้องทำ CSS เล็กน้อย
เทคโนโลยีแฮ็คก็พอแล้ว! ดังนั้นฉันต้องพูดสองสามคำที่นี่ มีแอตทริบิวต์แนวตั้งใน CSS แต่จะเกิดขึ้นกับองค์ประกอบที่มีแอตทริบิวต์ valign ในองค์ประกอบ (X) HTML เท่านั้น
มีผล เช่น <td>, <th>, <caption> ฯลฯ ในองค์ประกอบตาราง เช่น <div> และ <span> ไม่มีคุณลักษณะ valign ดังนั้นจึงไม่สามารถใช้การจัดแนวตั้งกับองค์ประกอบเหล่านั้นได้
ผล.
บทช่วยสอนที่เกี่ยวข้อง: ไม่มีวิธีจัดกึ่งกลาง div ในแนวนอน
1. การจัดกึ่งกลางแนวตั้งแถวเดียว
หากมีข้อความเพียงบรรทัดเดียวในคอนเทนเนอร์ ก็ค่อนข้างง่ายที่จะจัดกึ่งกลางข้อความนั้น เราเพียงแต่ต้องตั้งค่าความสูงจริงให้เท่ากับความสูงของบรรทัดเท่านั้น
ชอบ:
div {
ความสูง:25px;
ความสูงของบรรทัด:25px;
ล้น: ซ่อน;
-
รหัสนี้ง่ายมาก การตั้งค่า overflow:hidden จะใช้ในภายหลังเพื่อป้องกันไม่ให้เนื้อหาเกินคอนเทนเนอร์หรือทำให้เกิดการตัดบรรทัดอัตโนมัติ เพื่อไม่ให้เกิดเอฟเฟกต์การจัดกึ่งกลางแนวตั้ง สอน CSS เพิ่มเติม
ขั้นตอน.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title> จัดกึ่งกลางข้อความบรรทัดเดียวในแนวตั้ง</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
เนื้อความ {font-size:12px;font-family:tahoma;}
div {
ความสูง:25px;
ความสูงของบรรทัด:25px;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div>ตอนนี้เราต้องการจัดกึ่งกลางข้อความในแนวตั้ง! </div>
</ร่างกาย>
</html>
2. จัดกึ่งกลางแนวตั้งของข้อความหลายบรรทัดโดยไม่ทราบความสูง
หากความสูงของชิ้นส่วนของเนื้อหาเปลี่ยนแปลงได้ เราก็สามารถใช้วิธีสุดท้ายที่ใช้เพื่อให้มีการจัดกึ่งกลางแนวนอนตามที่กล่าวไว้ในหัวข้อที่แล้ว ซึ่งก็คือการตั้งค่า Padding เพื่อให้ด้านบนและด้านล่าง
ค่าช่องว่างภายในสามารถเหมือนกันได้ ขอย้ำอีกครั้ง นี่เป็นวิธี "ดู" ในการจัดกึ่งกลางแนวตั้ง ซึ่งเป็นเพียงวิธีในการทำให้ข้อความเติม <div> ให้สมบูรณ์ คุณสามารถใช้บางอย่างเช่น
รหัสต่อไปนี้:
div {
ช่องว่างภายใน:25px;
-
ข้อดีของวิธีนี้คือสามารถทำงานบนเบราว์เซอร์ใดก็ได้ และโค้ดนั้นง่ายมาก แต่ข้อกำหนดเบื้องต้นสำหรับการประยุกต์ใช้วิธีนี้ก็คือ ความสูงของคอนเทนเนอร์จะต้องสามารถปรับขนาดได้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title> การจัดกึ่งกลางข้อความหลายบรรทัดในแนวตั้ง</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
เนื้อความ {font-size:12px;font-family:tahoma;}
div {
ช่องว่างภายใน:25px;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div><pre>ตอนนี้เราต้องการจัดกึ่งกลางข้อความในแนวตั้ง!
div {
ช่องว่างภายใน:25px;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
-
</pre></div>
</ร่างกาย>
</html>
3. การจัดกึ่งกลางข้อความหลายบรรทัดด้วยความสูงคงที่
ในตอนต้นของบทความนี้ เราได้กล่าวไว้ว่าแอตทริบิวต์การจัดแนวตั้งใน CSS จะใช้งานได้เฉพาะกับแท็ก (X)HTML ที่มีแอตทริบิวต์ valign เท่านั้น แต่ยังมีการแสดงใน CSS ด้วย
คุณลักษณะนี้สามารถจำลอง <table> ได้ ดังนั้นเราจึงสามารถใช้คุณลักษณะนี้เพื่อสร้าง <div> จำลอง <table> และใช้การจัดแนวตั้ง โปรดทราบว่า display:table และ
วิธีใช้ display:table-cell โดยอันแรกจะต้องตั้งค่าบนองค์ประกอบหลัก และอันหลังจะต้องตั้งค่าบนองค์ประกอบลูก ดังนั้นเราจำเป็นต้องเพิ่มองค์ประกอบ <div> อีกอันสำหรับข้อความที่ต้องวางตำแหน่ง:
div#ห่อ {
ความสูง:400px;
จอแสดงผล:ตาราง;
-
div#เนื้อหา {
แนวตั้งจัด: กลาง;
จอแสดงผล: ตารางเซลล์;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title> การจัดกึ่งกลางข้อความหลายบรรทัดในแนวตั้ง</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
เนื้อความ {font-size:12px;font-family:tahoma;}
div#ห่อ {
ความสูง:400px;
จอแสดงผล:ตาราง;
-
div#เนื้อหา {
แนวตั้งจัด: กลาง;
จอแสดงผล: ตารางเซลล์;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ห่อ">
<div id="content"><pre>ตอนนี้เราต้องการจัดกึ่งกลางข้อความในแนวตั้ง! เว็บเจเอ็กซ์.คอม
div#ห่อ {
ความสูง:400px;
จอแสดงผล:ตาราง;
-
div#เนื้อหา {
แนวตั้งจัด: กลาง;
จอแสดงผล: ตารางเซลล์;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
-
</pre></div>
</div>
</ร่างกาย>
</html>
วิธีนี้จะเหมาะสมที่สุด แต่น่าเสียดายที่ Internet Explorer 6 ไม่เข้าใจจอแสดงผล:ตาราง และจอแสดงผล:ตาราง-เซลล์อย่างถูกต้อง ดังนั้นจึงใช้วิธีนี้ใน
มันไม่ถูกต้องใน Internet Explorer 6 และต่ำกว่า นั่นมันน่าหดหู่ใจ! อย่างไรก็ตาม เรามีวิธีการอื่น 4. วิธีแก้ปัญหาใน Internet Explorer
ใน Internet Explorer 6 และต่ำกว่า มีข้อบกพร่องในการคำนวณความสูง หลังจากวางตำแหน่งองค์ประกอบหลักใน Internet Explorer 6 แล้ว หากคุณวางตำแหน่งองค์ประกอบลูกแล้ว
เมื่อทำการคำนวณเปอร์เซ็นต์ ดูเหมือนว่าพื้นฐานของการคำนวณจะได้รับการสืบทอดมา (หากค่าตำแหน่งเป็นค่าสัมบูรณ์ ก็ไม่มีปัญหา แต่พื้นฐานของการคำนวณโดยใช้เปอร์เซ็นต์จะไม่เป็นขององค์ประกอบอีกต่อไป)
ส่วนสูงในขณะที่ความสูงของตำแหน่งสืบทอดมาจากองค์ประกอบหลัก) ตัวอย่างเช่น เรามีข้อมูลโค้ด (X)HTML ต่อไปนี้:
<div id="ห่อ">
<div id="subwrap">
<div id="เนื้อหา">
</div>
</div>
</div>
หากเราทำการวางตำแหน่งแบบสัมบูรณ์ในการตัดย่อย เนื้อหาก็จะสืบทอดคุณลักษณะนี้ไปด้วย แม้ว่าเนื้อหานั้นจะไม่ปรากฏบนหน้าทันที แต่หากเนื้อหานั้นอยู่ในตำแหน่งเพิ่มเติม
เมื่อแถวอยู่ในตำแหน่งที่สัมพันธ์กัน อัตราส่วน 100% ที่คุณใช้จะไม่เป็นความสูงดั้งเดิมของเนื้อหาอีกต่อไป เช่น หากเราตั้งค่าตำแหน่งย่อยเป็น 40% หากเราต้องการสร้างเนื้อหา
หากขอบทับซ้อนกับการตัดคำ ต้องตั้งค่า top:-80% จากนั้นหากเราตั้งค่าการตัดคำย่อยไว้ top:50% เราต้องใช้ 100% เพื่อให้เนื้อหากลับสู่ตำแหน่งเดิม
แต่ถ้าเราตั้งค่าเนื้อหาเป็น 50% ด้วยล่ะ? จากนั้นจะมีศูนย์กลางในแนวตั้งพอดี ดังนั้นเราจึงสามารถใช้วิธีนี้เพื่อให้เกิดการจัดกึ่งกลางแนวตั้งใน Internet Explorer 6:
div#ห่อ {
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
ความสูง:400px;
ตำแหน่ง:ญาติ;
-
div#ห่อย่อย {
ตำแหน่ง:แน่นอน;
เส้นขอบ: 1px ทึบ #000;
ด้านบน:50%;
-
div#เนื้อหา {
เส้นขอบ: 1px ทึบ #000;
ตำแหน่ง:ญาติ;
ด้านบน:-50%;
-
แน่นอนว่าโค้ดนี้จะใช้ได้กับเบราว์เซอร์ที่มีปัญหาด้านคอมพิวเตอร์ เช่น Internet Exlorer 6 เท่านั้น (แต่ฉันไม่เข้าใจ เช็คมาหลายบทความแล้ว ไม่รู้ว่าเพราะเหตุใด
เหมือนกันหรือด้วยเหตุผลบางอย่าง ดูเหมือนว่าหลายคนไม่เต็มใจที่จะอธิบายหลักการของจุดบกพร่องนี้ใน Internet Explorer 6 ฉันมีเพียงความเข้าใจผิวเผินเท่านั้นและจำเป็นต้องศึกษาเพิ่มเติม)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title> การจัดกึ่งกลางข้อความหลายบรรทัดในแนวตั้ง</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
เนื้อความ {font-size:12px;font-family:tahoma;}
div#ห่อ {
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
ความสูง:400px;
ตำแหน่ง:ญาติ;
-
div#ห่อย่อย {
ตำแหน่ง:แน่นอน;
ด้านบน:50%;
-
div#เนื้อหา {
ตำแหน่ง:ญาติ;
ด้านบน:-50%;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ห่อ">
<div id="subwrap">
<div id="content"><pre>ตอนนี้เราต้องการจัดกึ่งกลางข้อความในแนวตั้ง!
div#ห่อ {
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
ความสูง:500px;
ตำแหน่ง:ญาติ;
-
div#ห่อย่อย {
ตำแหน่ง:แน่นอน;
เส้นขอบ: 1px ทึบ #000;
ด้านบน:50%;
-
div#เนื้อหา {
เส้นขอบ: 1px ทึบ #000;
ตำแหน่ง:ญาติ;
ด้านบน:-50%;
</pre>
</div>
</div>
</div>
</ร่างกาย>
</html>
5. โซลูชั่นที่สมบูรณ์แบบ
จากนั้นเราจะได้รับโซลูชันที่สมบูรณ์แบบโดยรวมสองวิธีข้างต้นเข้าด้วยกัน แต่ต้องใช้ความรู้เกี่ยวกับการแฮ็ก CSS หากต้องการใช้ CSS Hack เพื่อแยกความแตกต่างระหว่างเบราว์เซอร์ คุณสามารถทำได้
โปรดดูที่ "แฮ็ค CSS แบบง่าย: สร้างความแตกต่าง IE6, IE7, IE8, Firefox, Opera":
div#ห่อ {
จอแสดงผล:ตาราง;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
ความสูง:400px;
_ตำแหน่ง:ญาติ;
ล้น: ซ่อน;
-
div#ห่อย่อย {
แนวตั้งจัด: กลาง;
จอแสดงผล: ตารางเซลล์;
_ตำแหน่ง:สัมบูรณ์;
_บน:50%;
-
div#เนื้อหา {
_ตำแหน่ง:ญาติ;
_บน:-50%;
-
ณ จุดนี้ โซลูชั่นการจัดศูนย์กลางที่สมบูรณ์แบบจะถูกสร้างขึ้น
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title> การจัดกึ่งกลางข้อความหลายบรรทัดในแนวตั้ง</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
เนื้อความ {font-size:12px;font-family:tahoma;}
div#ห่อ {
จอแสดงผล:ตาราง;
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
ความสูง:400px;
_ตำแหน่ง:ญาติ;
ล้น: ซ่อน;
-
div#ห่อย่อย {
แนวตั้งจัด: กลาง;
จอแสดงผล: ตารางเซลล์;
_ตำแหน่ง:สัมบูรณ์;
_บน:50%;
-
div#เนื้อหา {
_ตำแหน่ง:ญาติ;
_บน:-50%;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ห่อ">
<div id="subwrap">
<div id="content"><pre>ตอนนี้เราต้องการจัดกึ่งกลางข้อความในแนวตั้ง!
div#ห่อ {
เส้นขอบ: 1px ทึบ #FF0099;
สีพื้นหลัง:#FFCCFF;
ความกว้าง:760px;
ความสูง:500px;
ตำแหน่ง:ญาติ;
-
div#ห่อย่อย {
ตำแหน่ง:แน่นอน;
เส้นขอบ: 1px ทึบ #000;
ด้านบน:50%;
-
div#เนื้อหา {
เส้นขอบ: 1px ทึบ #000;
ตำแหน่ง:ญาติ;
ด้านบน:-50%;
</pre>
</div>
</div>
</div>
</ร่างกาย>
</html>
PS ค่าของการจัดกึ่งกลางแนวตั้งคือค่าตรงกลาง ในขณะที่ค่าของการจัดกึ่งกลางแนวนอนคือค่ากึ่งกลาง