เค้าโครงหน้าในมาตรฐานเว็บถูกนำมาใช้โดยใช้ Div และ CSS ความรู้ที่ใช้กันมากที่สุดคือการจัดกึ่งกลางหน้าทั้งหน้าในแนวนอน นี่คือความรู้พื้นฐานในการจัดวางหน้ากระดาษและความรู้ที่ควรทำความเข้าใจก่อน อย่างไรก็ตาม ผู้คนมักจะถามคำถามนี้ ในที่นี้ ฉันจะสรุปสั้นๆ ถึงวิธีการใช้ Div และ CSS เพื่อให้หน้าเว็บอยู่ตรงกลางแนวนอน:
1. Margin:auto 0 และ text-aligh:center
ถูกใช้ในเบราว์เซอร์สมัยใหม่ (เช่น อินเทอร์เน็ต) Explorer 7, Firefox, Opera ฯลฯ) วิธีการจัดกึ่งกลางแนวนอนในเบราว์เซอร์สมัยใหม่นั้นง่ายมาก เพียงตั้งค่าระยะขอบซ้ายและขวาให้เป็นอัตโนมัติ ความหมาย:
#wrap { ระยะขอบ:0 อัตโนมัติ;}
โค้ดด้านบนหมายความว่าระยะห่างระหว่าง wrap div และด้านซ้ายและด้านขวาจะถูกตั้งค่าโดยอัตโนมัติ โดยค่าบนและล่างเป็น 0 (สามารถเป็นค่าใดก็ได้) โปรดเรียกใช้โค้ดปัจจุบันในเบราว์เซอร์สมัยใหม่ (เช่น Internet Explorer 7, Firefox, Opera ฯลฯ):
<!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>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#ห่อ {
ความกว้าง:760px;
ระยะขอบ:0 อัตโนมัติ;
เส้นขอบ: 1px ทึบ #333;
สีพื้นหลัง:#ccc;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ห่อ">
หากต้องการตั้งค่าการจัดกึ่งกลางแนวนอนขององค์ประกอบของหน้าในเบราว์เซอร์สมัยใหม่ เช่น Firefox เพียงระบุ Margin:0 auto;
<ก่อน>
div#ห่อ {
ความกว้าง:760px;
Margin:0 auto; /*0 ที่นี่สามารถเป็นค่าใดก็ได้*/
เส้นขอบ:1px ทึบ #ccc;
สีพื้นหลัง:#999;
-
</pre>
</div>
</ร่างกาย>
</html>
ข้างต้นทำงานได้ดีมาก แต่วิธีนี้ใช้ไม่ได้กับ Internet Explorer 6 และใหม่กว่า แต่โชคดีที่มีวิธีแก้ไขปัญหาของตัวเอง ใน Internet Explorer คุณลักษณะการจัดตำแหน่งข้อความสามารถสืบทอดได้ กล่าวคือ หลังจากตั้งค่าในองค์ประกอบหลักแล้ว จะมีคุณลักษณะนี้ในองค์ประกอบลูกตามค่าเริ่มต้น ดังนั้นเราจึงสามารถตั้งค่าแอตทริบิวต์การจัดตำแหน่งข้อความในแท็ก body ให้อยู่ตรงกลางได้ เพื่อให้องค์ประกอบทั้งหมดบนหน้าอยู่ตรงกลางโดยอัตโนมัติ ในเวลาเดียวกัน เรายังต้องเพิ่ม hook เพื่อเปลี่ยนข้อความบนหน้าด้วย วิธีที่เราคุ้นเคยกับการอ่าน - จัดชิดซ้าย เราจึงต้องเขียนโค้ดดังนี้:
เนื้อความ {ข้อความจัด:ศูนย์;}
#wrap {จัดข้อความ: ซ้าย;}
ด้วยวิธีนี้ เราสามารถจัดตำแหน่งกึ่งกลางของ Div ใน Internet Explorer ได้อย่างง่ายดาย ดังนั้นเพื่อแสดงเอฟเฟกต์การตั้งศูนย์กลางในทุกเบราว์เซอร์ เราสามารถเขียนโค้ดของเราได้ดังนี้:
เนื้อความ { การจัดแนวข้อความ: กึ่งกลาง }
#wrap { การจัดตำแหน่งข้อความ: ซ้าย;
ระยะขอบ:0 อัตโนมัติ;
-
<!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>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
เนื้อความ { การจัดแนวข้อความ: กึ่งกลาง }
div#ห่อ {
การจัดแนวข้อความ: ซ้าย;
ความกว้าง:760px;
ระยะขอบ:0 อัตโนมัติ;
เส้นขอบ: 1px ทึบ #333;
สีพื้นหลัง:#ccc;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ห่อ">
หากต้องการตั้งค่าการจัดกึ่งกลางแนวนอนขององค์ประกอบของหน้าในเบราว์เซอร์สมัยใหม่ เช่น Firefox เพียงระบุ Margin:0 auto;
<ก่อน>
div#ห่อ {
ความกว้าง:760px;
Margin:0 auto; /*0 ที่นี่สามารถเป็นค่าใดก็ได้*/
เส้นขอบ:1px ทึบ #ccc;
สีพื้นหลัง:#999;
-
ใน Internet Explorer 6 และต่ำกว่า เรายังต้องทำการตั้งค่าต่อไปนี้:
เนื้อความ { การจัดแนวข้อความ: กึ่งกลาง }
div#ห่อ {
การจัดแนวข้อความ: ซ้าย;
-
</pre>
</div>
</ร่างกาย>
</html>
แต่มีหลักฐานอยู่ที่นี่ นั่นคือองค์ประกอบที่อยู่ตรงกลางต้องมีความกว้างคงที่ ตัวอย่างเช่น เราตั้งค่าเป็น 760 พิกเซล
2. การวางตำแหน่งสัมพัทธ์และระยะขอบติดลบ
ดำเนินการจัดตำแหน่งสัมพันธ์สำหรับการตัดขอบ จากนั้นใช้ระยะขอบติดลบเพื่อชดเชยออฟเซ็ต วิธีการนี้ค่อนข้างง่ายและใช้งานง่าย:
#wrap {
ตำแหน่ง:ญาติ;
ความกว้าง:760px;
ซ้าย:50%;
ขอบซ้าย:-380px
-
ความหมายของโค้ดนี้คือการตั้งค่าตำแหน่งของ wrap ที่สัมพันธ์กับแท็ก body ขององค์ประกอบหลัก จากนั้นย้ายขอบด้านซ้ายไปตรงกลางหน้า (นั่นคือความหมายของ left: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>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#ห่อ {
ตำแหน่ง:ญาติ;
ความกว้าง:760px;
ซ้าย:50%;
ขอบซ้าย:-380px;
เส้นขอบ: 1px ทึบ #333;
สีพื้นหลัง:#ccc;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ห่อ">
วิธีการที่ใช้ได้กับทุกเบราว์เซอร์:
<ก่อน>
div#ห่อ {
ตำแหน่ง:ญาติ;
ความกว้าง:760px;
ซ้าย:50%;
ขอบซ้าย:-380px;
เส้นขอบ: 1px ทึบ #333;
สีพื้นหลัง:#ccc;
-
</pre>
</div>
</ร่างกาย>
</html>
ในทำนองเดียวกัน คุณต้องตั้งค่าความกว้างคงที่ก่อนที่จะตั้งค่ากึ่งกลางแนวนอน
จะเลือกวิธีไหน?
สองวิธีข้างต้นไหนดีกว่ากัน? วิธีแรกดูเหมือนจะใช้เทคโนโลยีแฮ็ก แต่จริงๆ แล้วไม่ได้เป็นเช่นนั้น มันเป็นวิธีการเขียนมาตรฐานของเว็บที่ค่อนข้างน่าพอใจและเป็นไปตามข้อกำหนดอย่างสมบูรณ์ ดังนั้น คุณสามารถเลือกวิธีใดวิธีหนึ่งจากสองวิธีสำหรับการใช้งานได้ เป็นปัญหาแฮ็ค CSS
3. วิธีการจัดศูนย์กลางอื่นๆ
ที่กล่าวมาข้างต้นคือการใช้งานการจัดกึ่งกลางแนวนอนทั้งหมดเมื่อมีการตั้งค่าความกว้างเฉพาะ บางครั้งเราต้องการสร้างเลย์เอาต์ที่ยืดหยุ่น หรือเมื่อองค์ประกอบอยู่ในคอนเทนเนอร์ เราเพียงต้องการให้องค์ประกอบอยู่กึ่งกลางและไม่ต้องการตั้งค่าความกว้างที่เฉพาะเจาะจง อันที่จริง นี่ไม่ใช่เลย์เอาต์ที่จัดกึ่งกลางอย่างแท้จริง สำหรับองค์ประกอบที่มีความยาว 100% คุณจะบอกว่าองค์ประกอบนั้นอยู่กึ่งกลางหรือจัดชิดซ้าย ดังนั้นการจัดกึ่งกลางทั้งหมดโดยไม่มีความสูงและความกว้างจึงไม่ใช่การจัดกึ่งกลางที่แท้จริง เราตั้งค่าการออกแบบนี้โดยใช้ช่องว่างภายในขององค์ประกอบ ที่จริงแล้ว เราเปลี่ยนขนาดคอนเทนเนอร์ขององค์ประกอบหลัก:
หากเราต้องการให้ความยาวของ wrap element เปลี่ยนแปลงไปตามหน้าต่างโดยที่ยังคงรักษาจุดศูนย์กลางไว้ เราสามารถเขียนได้ดังนี้:
ร่างกาย {
การขยาย:10px 150px;
-
ในกรณีนี้ เราเพียงแต่ต้องรักษาช่องว่างภายในด้านซ้ายและด้านขวาขององค์ประกอบหลักให้เท่ากัน
<!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>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
ร่างกาย {
การขยาย:10px 150px;
-
div#ห่อ {
เส้นขอบ: 1px ทึบ #333;
สีพื้นหลัง:#ccc;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ห่อ">
รูปแบบที่ยืดหยุ่นและเป็นศูนย์กลางซึ่งเปลี่ยนแปลงไปตามขนาดหน้าต่างเบราว์เซอร์:
<ก่อน>
ร่างกาย {
การขยาย:10px 150px;
-
ในกรณีนี้ เราเพียงแต่ต้องรักษาช่องว่างภายในด้านซ้ายและด้านขวาขององค์ประกอบหลักให้เท่ากัน
</pre>
</div>
</ร่างกาย>
</html>
แน่นอนว่านี่เป็นเพียง "ดูเหมือนว่าจะอยู่ตรงกลาง" แต่มักจะมีประโยชน์มาก