วันนี้เราจะพยายามจัด Susuwatari . สิ่งมีชีวิตเล็กๆ เหล่านี้ที่มักเรียกกันว่า 'เขม่า' ชอบเคลื่อนไหวไปมามาก เราจึงต้องอยู่นิ่งๆ และอยู่ตรงกลาง เพื่อที่เราจะสามารถถ่ายภาพพวกมันได้ตั้งแต่หนึ่งภาพขึ้นไป มาทำสิ่งนี้กันเถอะ!
หมายเหตุ:ขณะที่คุณอ่าน โปรดอ้างอิงถึง repo ของบล็อก
การเพิ่มรูปภาพของเราลงใน HTML
ความจำเป็นในการจัดกึ่งกลางของภาพเป็นเรื่องปกติมาก สมมติว่าเรามีภาพเขม่าแล้วเพิ่มด้วย image . แบบธรรมดา แท็ก:
<img class="soot" src="soot.jpg" alt="soot!">
อย่าลืม:ขณะที่คุณเขียนแท็กรูปภาพ โปรดทราบว่าแท็กนี้ไม่มีโหนดย่อย นั่นคือเหตุผลที่เราไม่ปิดแท็ก แม้ว่าเบราว์เซอร์ของคุณอาจไม่บ่นหากคุณมี </img>ปิด CSS ใดๆ ที่ใช้กับ CSS อาจไม่ทำงาน ดังนั้นเพียงทำตามข้อตกลงด้านบน
ตอนนี้ ทันทีที่เราเพิ่มรูปภาพโดยไม่มี CSS รูปภาพจะมีลักษณะดังนี้:
เนื่องจากรูปภาพของเราอยู่ในตำแหน่งตามโฟลว์เริ่มต้นของหน้า ในกรณีนี้ทางด้านซ้าย เหมือนกับชื่อของเรา
การจัดกึ่งกลางวิธีที่ 1: ระยะขอบ:0 อัตโนมัติ
วิธีที่ง่ายที่สุดในการทำให้เขม่าอยู่ตรงกลางคือการใช้สไตล์ต่อไปนี้กับ img . ของเรา ตัวเลือก:
img.soot {
margin: 0 auto;
display: block;
} เรากำลังเพิ่มชื่อคลาสลงในตัวเลือกรูปภาพของเราเพื่อให้มีความเฉพาะเจาะจงมากขึ้น ในกรณีที่เราเพิ่มเขม่ามากขึ้น เราจำเป็นต้องตรวจสอบให้แน่ใจว่าทั้งหมดอยู่กึ่งกลาง
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
ทีนี้มาดูหน้าของเรากันดีกว่า ใช่แล้ว รูปภาพของเราอยู่ตรงกลาง!
เกิดอะไรขึ้น?
- ส่วนต่าง
marginแอตทริบิวต์สามารถรับพารามิเตอร์สี่ตัว สองตัวบนและล่างและอีกสองตัวซ้ายและขวา โดยพื้นฐานแล้ว เรากำลังบอกเบราว์เซอร์ให้กำหนดระยะขอบด้านซ้ายและขวา ซึ่งในกรณีนี้เบราว์เซอร์จะตั้งค่าให้เท่ากันและทำให้รูปภาพอยู่กึ่งกลาง displayของเรา คุณสมบัติสามารถมีค่าได้มากมาย ในกรณีนี้ เราเลือก 'บล็อก' ซึ่งโดยทั่วไปจะบอกองค์ประกอบ img t- o ใช้ความกว้างทั้งหมดและอยู่ในแนวเดียวกัน ดังนั้นเมื่อเราใส่ระยะขอบ เรามั่นใจว่าใช้กับความกว้างของรูปภาพทั้งหมด นั่นคือสาเหตุที่ทำให้อยู่กึ่งกลาง
การจัดกึ่งกลางวิธีที่ 2: การจัดแนวข้อความ:กึ่งกลาง
เราสามารถจัดเขม่าของเราให้อยู่ตรงกลางโดยวางไว้ในองค์ประกอบหลัก สมมติว่าเป็น div แล้วจัดแนวข้อความบนพาเรนต์ หากต้องการปรับแนวรูปภาพของเรา ให้เพิ่มรูปภาพลงในองค์ประกอบหลัก (มักเรียกว่าองค์ประกอบคอนเทนเนอร์):
.container {
text-align: center;
}
ในฐานะที่เป็น div . ของเรา โดยธรรมชาติแล้วองค์ประกอบจะเป็นบล็อกคอนเทนเนอร์ มันจะใช้ความกว้างทั้งหมด และลูกๆ ของมันจะถูกจัดให้อยู่กึ่งกลางในกรณีนี้ ภาพเขม่าของเรา!
บทสรุป
การออกเสียง สุสุวาตาริ เหมือนจะพูดได้คำเดียว (ลองนึกภาพว่าพูดหลายๆ ครั้ง) ในทางกลับกัน การจัดวางรูปภาพให้อยู่ตรงกลางนั้นง่ายมากเลย!
