ตัวอย่างการผลิตเว็บเพจ: วิธีการจัดกึ่งกลางรูปภาพอย่างแท้จริง

บทความบทนำของ wulin.com (www.vevb.com): วิธีการจัดกึ่งกลางรูปภาพในแนวตั้ง

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

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

อย่างไรก็ตามผลกระทบที่นำมาใช้ในความเป็นจริงไม่สมบูรณ์แบบ เนื่องจากการแยกวิเคราะห์ของแต่ละเบราว์เซอร์แตกต่างกันเบราว์เซอร์แต่ละตัวจะมีการเบี่ยงเบน 1px-3px

วิธีที่ 1 (XHTML 1.0 Transitional):

วิธีนี้คือการตั้งค่าโหมดการแสดงผลของคอนเทนเนอร์ภายนอกที่จะแสดง: ตารางทำรังแท็ก span นอกแท็ก IMG และตั้งค่าโหมดการแสดงผลของช่วงที่จะแสดง: เซลล์ตารางเพื่อให้แนวตั้งสามารถจัดตำแหน่งได้ง่ายเช่นองค์ประกอบตาราง แน่นอนว่านี่เป็นเฉพาะในเบราว์เซอร์มาตรฐาน IE6/IE7 ยังต้องใช้การวางตำแหน่ง

ส่วนโครงสร้าง HTML:

<div id = box>

<span> <img src = images/demo.jpg alt => </span>

</div>

ส่วนสไตล์ CSS:

<style type = text/css>

#กล่อง{

ความกว้าง: 500px; ความสูง: 400px;

แสดง: ตาราง;

TEXT-ALIGN: CENTER;

ชายแดน: 1px Solid #D3D3D3; ความเป็นมา: #FFF;

-

#Box Span {

แสดง: ตารางเซลล์;

แนวตั้ง-แนว: กลาง;

-

#box img {

ชายแดน: 1px Solid #CCC;

-

</style>

<!-[ถ้า lte ie 7]>

<style type = text/css>

#กล่อง{

ตำแหน่ง: ญาติ;

ล้น: ซ่อน;

-

#Box Span {

ตำแหน่ง: สัมบูรณ์;

ซ้าย: 50%; ด้านบน: 50%;

-

#box img {

ตำแหน่ง: ญาติ;

ซ้าย: -50%; ด้านบน: -50%;

-

</style>

<! [endif]->

วิธีที่ 2 (XHTML 1.0 Transitional):

หลักการและโครงสร้างของการดำเนินการตามวิธีที่ 2 และวิธีการที่ 1 นั้นคล้ายคลึงกันและโครงสร้างก็เหมือนกัน วิธีที่ 1 ใช้คำอธิบายประกอบแบบมีเงื่อนไขและวิธีการที่ 2 ใช้ CSS Hack

ส่วนสไตล์ CSS:

<style type = text/css>

#กล่อง{

ความกว้าง: 500px; ความสูง: 400px;

ล้น: ซ่อน;

ตำแหน่ง: ญาติ;

แสดง: ตารางเซลล์;

TEXT-ALIGN: CENTER;

แนวตั้ง-แนว: กลาง;

ชายแดน: 1px Solid #D3D3D3; ความเป็นมา: #FFF;

-

#Box Span {

ตำแหน่ง: คงที่;

*ตำแหน่ง: สัมบูรณ์; /*แฮ็คสำหรับ IE6/7*/

ด้านบน: 50%; /*แฮ็คสำหรับ IE6/7*/

-

#box img {

ตำแหน่ง: คงที่;

*ตำแหน่ง: ญาติ; /*แฮ็คสำหรับ IE6/7*/

ด้านบน: -50%; ซ้าย: -50%; /* แฮ็คสำหรับ IE6/7*/

ชายแดน: 1px Solid #CCC;

-

</style>

วิธีนี้มีข้อเสีย ในเบราว์เซอร์มาตรฐานเนื่องจากโหมดการแสดงผลของคอนเทนเนอร์ภายนอก #Box คือการแสดงผล: Table-cell แอตทริบิวต์มาร์จิ้นไม่สามารถใช้สำหรับ #Box และการตั้งค่าเส้นขอบใน IE8 นั้นไม่ถูกต้องเช่นกัน

วิธีที่ 3 (XHTML 1.0 เข้มงวด):

เบราว์เซอร์มาตรฐานยังคงตั้งค่าโหมดการแสดงผลของคอนเทนเนอร์ภายนอก #Box เพื่อแสดง: Table-cell IE6/IE7 ใช้วิธีการแทรกแท็กที่ว่างเปล่าที่ด้านหน้าของแท็ก IMG

ส่วนโครงสร้าง HTML:

<div id = box> <i> </i> <img src = images/demo.jpg alt => </div>

ส่วนสไตล์ CSS:

<style type = text/css>

#กล่อง{

ความกว้าง: 500px; ความสูง: 400px;

แสดง: ตารางเซลล์;

TEXT-ALIGN: CENTER;

แนวตั้ง-แนว: กลาง;

ชายแดน: 1px Solid #D3D3D3; ความเป็นมา: #FFF;

-

#box img {

ชายแดน: 1px Solid #CCC;

-

</style>

<!-[ถ้าเช่น]>

<style type = text/css>

#box i {

แสดง: Inline-Block;

ความสูง: 100%;

แนวดิ่ง: กลาง

-

#box img {

แนวดิ่ง: กลาง

-

</style>

<! [endif]->

วิธีที่ 3 ยังใช้กับ XHTML 1.0 Transitional วิธีการข้างต้นจะถูกรวบรวมจากเว็บไซต์การสอนเว็บ ในขณะนี้มีเพียงสามวิธีนี้ที่ค่อนข้างพอใจและความเข้ากันได้ดีและข้อ จำกัด ค่อนข้างเล็ก ฉันได้ทดสอบวิธีการบางอย่างทีละวิธี แต่ผลลัพธ์ไม่เหมาะและมีความแตกต่างกันมากระหว่างเบราว์เซอร์ที่แตกต่างกัน นอกจากนี้ Situ Zhengmei ยังได้รวบรวมวิธีการบางอย่างที่นี่

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

ต้นฉบับ: