วิธีจัดปุ่มให้อยู่ตรงกลางด้วย HTML &CSS

คุณจะจัดองค์ประกอบปุ่มบล็อกหรือบล็อกแบบอินไลน์โดยใช้ CSS และ HTML ได้อย่างไร

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

องค์ประกอบปุ่มบล็อกแบบอินไลน์

โดยค่าเริ่มต้น องค์ประกอบปุ่มและลิงก์ถูกตั้งค่าเป็น display: inline-block . องค์ประกอบที่มีชุดบล็อกอินไลน์จะอยู่ภายในโฟลว์ปกติของเอกสารบนหน้าขณะที่ย้ายจากซ้ายไปขวา

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

ซึ่งคล้ายกับองค์ประกอบที่มี display: inline ตั้งค่า ยกเว้นว่าคุณสามารถควบคุมความสูงและความกว้างขององค์ประกอบบล็อกแบบอินไลน์ และไม่ใช่องค์ประกอบแบบอินไลน์

การจัดกึ่งกลางโดยใช้ text-align:center

คุณสามารถจัดองค์ประกอบ inline-block (และ inline) ให้อยู่กึ่งกลางโดยการตั้งค่า text-align: center บนองค์ประกอบหลัก

มาดูกันว่ามันทำงานอย่างไรในโค้ด นี่คือมาร์กอัป HTML ของเรา:

<div class="text-center">
  <button type="submit">Text-align: center</button>
</div>

และ CSS ของเรา:

.text-center {
  text-align: center;
}

เราได้ห่อ <button> . ของเราแล้ว องค์ประกอบใน <div> ด้วย text-align: center ชุด. ซึ่งจะส่งผลให้ปุ่มอยู่ตรงกลางดังนี้:

บล็อกองค์ประกอบปุ่มที่มีความกว้างคงที่

องค์ประกอบบล็อกไม่สามารถจัดกึ่งกลางด้วย text-align: center เพราะโดยค่าเริ่มต้นจะเป็นแบบเต็มความกว้างเว้นแต่จะได้รับความกว้างคงที่

บางครั้งคุณอาจต้องกำหนดความกว้างคงที่บนปุ่ม ดังนั้นหากคุณตั้งค่า คุณสามารถใช้เทคนิคนี้เพื่อจัดปุ่มให้อยู่ตรงกลางหน้าได้

สมมติว่าเรามีปุ่มที่เราตั้งค่าไว้กว้าง 200px แม้ว่าจะมีขนาดเพียง 200px แต่จะไม่ให้องค์ประกอบอื่นอยู่ข้างๆ

คุณสามารถจัดองค์ประกอบระดับบล็อกให้อยู่ตรงกลางได้โดยการตั้งค่า margin-left และ margin-right เป็น auto . เราสามารถใช้ชวเลข 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

อีกวิธีหนึ่ง คุณสามารถจัดองค์ประกอบทั้งบล็อกแบบอินไลน์และบล็อกโดยใช้ 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 ได้ที่นี่