จะจัดกึ่งกลาง element ปุ่มแบบ block หรือ inline-block ด้วย CSS และ HTML ได้อย่างไร?
เรื่องนี้อาจท้าทายเล็กน้อย แต่นี่คือเคล็ดลับด่วนสำหรับจัดกึ่งกลางปุ่ม ไม่ว่าจะเป็นประเภท element ใด
Element ปุ่มแบบ Inline-block
Element ปุ่มและลิงก์ โดยค่าเริ่มต้นเป็น display: inline-block Element ที่ตั้งค่า inline-block จะอยู่ในโฟลว์ปกติของเอกสารบนหน้าเมื่อเคลื่อนจากซ้ายไปขวา
หมายถึงหากมี element inline-block สองตัวติดกัน จะแสดงติดกันซ้ายขวา หากมีพื้นที่แนวนอนเพียงพอ
คล้ายกับ element ที่ตั้ง display: inline แต่คุณควบคุม height และ width ของ inline-block ได้ ส่วน inline ไม่ได้
จัดกึ่งกลางด้วย text-align: center
คุณสามารถจัดกึ่งกลาง element inline-block (และ inline) ได้โดยตั้ง text-align: center บน element พาเรนท์
ดูตัวอย่างโค้ด โม้คอัป HTML:
<div class="text-center"> <button type="submit">Text-align: center</button> </div>และ CSS:
.text-center { text-align: center; }เราห่อ <button> ด้วย <div> ที่มี text-align: center จะได้ปุ่มจัดกึ่งกลาง:
Element ปุ่มแบบ Block พร้อม Static Width
Element แบบ Block ไม่สามารถจัดกึ่งกลางด้วย text-align: center ได้ เพราะโดยค่าเริ่มต้นจะเป็น full-width เว้นแต่จะกำหนด static width
บางครั้งคุณอาจต้องตั้ง static width ให้ปุ่ม ดังนั้นจึงใช้เทคนิคนี้จัดกึ่งกลางปุ่มบนหน้า
สมมติเรามีปุ่มตั้ง width 200px แม้จะกว้างแค่ 200px ก็ไม่ปล่อยให้ element อื่นอยู่ข้างๆ
คุณสามารถจัดกึ่งกลาง block level element ได้โดยตั้ง margin-left และ margin-right เป็น auto ใช้ shorthand margin: 0 auto (ยังตั้ง margin-top และ margin-bottom เป็นศูนย์)
ดูโค้ดตัวอย่าง:
<button type="submit" class="block magenta margin-auto">Margin: 0 auto</button> .button.block { display: block; width: 200px; } .margin-auto { margin: 0 auto; }ปุ่มจะแสดงบนหน้าดังนี้:
จัดกึ่งกลางด้วย Flexbox
อีกทางหนึ่ง สามารถจัดกึ่งกลางทั้ง inline-block และ block element ได้ด้วย Flexbox
ห่อปุ่มใน <div> พาเรนท์ ตั้งพาเรนท์เป็น display: flex และ justify-content: center
โค้ด:
<div class="flex-parent jc-center"> <button type="submit">Inline-block button</button> </div> <div class="flex-parent jc-center"> <button type="submit">Block button</button> </div>.flex-parent { display: flex; } .jc-center { justify-content: center; }
ปุ่มสองตัวติดกัน
บางครั้งอาจต้องการปุ่มสองตัวติดกัน แต่จัดกึ่งกลางทั้งคู่บนหน้า
ทำได้โดยห่อปุ่มทั้งสองใน <div> พาเรนท์ และใช้ Flexbox จัดกึ่งกลาง
โค้ดตัวอย่าง:
<div class="flex-parent jc-center"> <button type="submit" class="green margin-right">Confirm</button> <button type="submit" class="magenta">Cancel</button> </div>.flex-parent { display: flex; } .jc-center { justify-content: center; } button.margin-right { margin-right: 20px; }สังเกตว่าเรายังเพิ่ม margin-right: 20px ให้ปุ่มแรก เพื่อเว้นระยะห่างระหว่างปุ่ม
ลักษณะปุ่มบนหน้า:
ดูโค้ดจริงได้ที่ Codepen
