กึ่งกลางภาพ
ใช้ place-items: center
เพื่อจัดองค์ประกอบไว้ตรงกลางองค์ประกอบหลัก
ก่อนอื่นให้ระบุตารางกริดเป็นวิธีการแสดงผล จากนั้นเขียน place-items: center
ในองค์ประกอบเดียวกัน place-items
เป็นชื่อย่อสำหรับตั้งค่าทั้ง align-items
และ justify-items
พร้อมกัน เมื่อตั้งค่าเป็น center
ทั้ง align-items
และ justify-items
ก็จะตั้งค่าเป็น center
.parent {
display: grid;
place-items: center;
}
วิธีนี้ทำให้เนื้อหาอยู่ในจุดศูนย์กลางอย่างสมบูรณ์แบบโดยไม่คำนึงถึงขนาดที่แท้จริง
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2023-10-25 UTC
[null,null,["อัปเดตล่าสุด 2023-10-25 UTC"],[],[]]