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

ใน HTML ปุ่มเป็นองค์ประกอบที่คลิกได้ซึ่งใช้เพื่อดำเนินการบางอย่าง เมื่อใช้ CSS คุณสามารถกำหนดตำแหน่งของปุ่มในตำแหน่งที่คุณต้องการวาง ในการทำเช่นนี้ CSS มีเทคนิคหลายอย่าง หนึ่งในนั้นคือ flexbox “ flex ” ใช้เพื่อกำหนดตำแหน่งขององค์ประกอบตามวิวพอร์ต

บทความนี้จะสอนวิธีจัดปุ่มให้อยู่ตรงกลางโดยใช้ CSS Flexbox

เริ่มกันเลย!

จะวางปุ่มตรงกลางโดยใช้ CSS flexbox ได้อย่างไร

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

ไวยากรณ์

ในไวยากรณ์ที่ระบุข้างต้น “ flex ” จะถูกระบุเป็นค่าของ “ แสดง ' คุณสมบัติ.

ลองมาดูตัวอย่างการรวมศูนย์ของปุ่มโดยใช้ flex

ตัวอย่าง

ใน ของ HTML เราจะสร้างคอนเทนเนอร์ที่มีคลาส