3 วิธีง่ายๆ ในการจัดองค์ประกอบให้อยู่ตรงกลางด้วย CSS

Maya Patel included in Programming Web Design Css

2023-12-23 285 words 2 minutes

Contents

ลิงค์ด่วน

⭐ ไฟล์ HTML อย่างง่ายเพื่อฝึกตั้งศูนย์

⭐ การใช้ Flexbox เพื่อจัดองค์ประกอบ Div ให้อยู่ตรงกลาง

⭐การใช้ CSS Grid เพื่อจัดองค์ประกอบ Div ให้อยู่ตรงกลาง

⭐การใช้การวางตำแหน่ง CSS เพื่อจัดองค์ประกอบ Div ให้อยู่ตรงกลาง

ประเด็นที่สำคัญ

การรวมศูนย์กลางองค์ประกอบภายในการออกแบบเว็บครั้งหนึ่งเคยเป็นงานที่น่าเกรงขาม แต่ CSS ร่วมสมัยยังอำนวยความสะดวกในการจัดตำแหน่งให้อยู่ตรงกลางได้อย่างง่ายดาย

Flexbox ได้กลายเป็นเทคนิคที่โดดเด่นในการจัดแนวเนื้อหาในลักษณะรวมศูนย์ โดยนำเสนอระบบกริดที่หลากหลายและปรับเปลี่ยนได้ ซึ่งเอื้อต่อการจัดเรียงองค์ประกอบต่างๆ ได้อย่างราบรื่น

การรวมศูนย์กลางองค์ประกอบบนเว็บไซต์สามารถทำได้โดยใช้ทั้ง CSS Grid และเทคนิคการวางตำแหน่ง ซึ่งให้ความแม่นยำอย่างกว้างขวางในการควบคุมการจัดเรียงและการจัดแนวของเนื้อหา

การวางองค์ประกอบไว้ตรงกลางภายในเค้าโครงเว็บสร้างความรำคาญให้กับนักออกแบบมานานแล้ว เนื่องจากไม่ใช่เรื่องง่ายเสมอไปในการบรรลุผล อย่างไรก็ตาม การออกแบบจำนวนมากจำเป็นต้องมีองค์ประกอบที่ตั้งอยู่ตรงกลาง และโชคดีที่ CSS ร่วมสมัยให้การสนับสนุนที่แข็งแกร่งสำหรับจุดประสงค์นี้

ทำความเข้าใจกระบวนการจัดกึ่งกลาง div ทั้งแนวนอนและแนวตั้งโดยใช้ flexbox, ตาราง CSS รวมถึงเทคนิคการวางตำแหน่ง CSS แบบดั้งเดิม

ไฟล์ HTML อย่างง่ายเพื่อฝึกการจัดกึ่งกลาง

ตัวอย่างโค้ดที่ให้มาแสดงให้เห็นถึงการดำเนินการจัดตำแหน่งแนวนอนผ่านการใช้โครงสร้าง HTML พื้นฐาน ในขณะที่จัดการคุณสมบัติ CSS สำหรับเอฟเฟกต์ต่างๆ การทดลองกับสไตล์ชีตต่างๆ จะให้ข้อมูลเชิงลึกเกี่ยวกับพฤติกรรมของแอตทริบิวต์เหล่านี้

 <!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 100px; height: 100px; }
 body { height: calc(100vh-16px); }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

การใช้ Flexbox เพื่อจัดองค์ประกอบ Div ให้อยู่ตรงกลาง

Flexbox ใช้กลยุทธ์ที่ตรงไปตรงมาซึ่งทำให้เป็นตัวเลือกที่ต้องการเนื่องจากความสามารถในการปรับตัว โมเดลเลย์เอาต์ช่วยอำนวยความสะดวกในการจัดตำแหน่งและกระจายพื้นที่ได้อย่างง่ายดาย ทำให้เป็นโซลูชันที่เหมาะสมที่สุดสำหรับการรวมศูนย์ส่วนประกอบภายในคอนเทนเนอร์

รวมศูนย์เนื้อหาโดยใช้ flexbox โดยใช้กฎ CSS ต่อไปนี้:

⭐ รวมองค์ประกอบ div ของคุณไว้ในคอนเทนเนอร์ ใช้คุณสมบัติ display: flex กับคอนเทนเนอร์เพื่อเปิดใช้งานเค้าโครง Flexbox ในกรณีทดสอบง่ายๆ ร่างกายสามารถทำหน้าที่เป็นภาชนะได้:

 body {
  display: flex;
}

⭐ ใช้คุณสมบัติ justify-content และ align-items เพื่อจัดแนวรายการตามแกนหลัก (แนวนอน) และแกนขวาง (แนวตั้ง) ตามลำดับ หากต้องการจัดกึ่งกลางแกนทั้งสอง ให้ตั้งค่าคุณสมบัติเหล่านี้ให้อยู่ตรงกลาง สำหรับการสาธิตง่ายๆ คุณควรตั้งค่าความสูงของตัวกล้องเป็น 100vh เพื่อที่คุณจะได้เห็นผลของการจัดตำแหน่งในแนวตั้ง

 body {
  justify-content: center;
  align-items: center;
}

⭐ กำหนดสีพื้นหลังให้กับ div เพื่อให้เห็นภาพตำแหน่งบนหน้าสุดท้าย:

 div { background-color: red; }

การวางแนวจากบนลงล่างและจากซ้ายไปขวา

การใช้ CSS Grid เพื่อจัดองค์ประกอบ Div ให้อยู่ตรงกลาง

การวางองค์ประกอบไว้ตรงกลางโดยใช้ CSS Grid จะให้ความแม่นยำในระดับสูงในการควบคุมเค้าโครงและการจัดตำแหน่ง ช่วยให้มีความยืดหยุ่นมากขึ้นในการออกแบบหน้าเว็บที่มีโครงสร้างที่ซับซ้อน

⭐ กำหนดคอนเทนเนอร์สำหรับเลย์เอาต์ของคุณและใช้การแสดงผล: สไตล์กริดเพื่อเปิดใช้งาน CSS Grid ในกรณีนี้ร่างกายทำหน้าที่เป็นภาชนะ

 body {
  display: grid;
}

⭐ ใช้คุณสมบัติ grid-template-columns และ grid-template-rows เพื่อกำหนดโครงสร้างของกริดของคุณ หากต้องการจัดกึ่งกลาง คอลัมน์และแถวเดียวก็เพียงพอแล้ว ดังนั้นให้ใช้ 1fr สำหรับทั้งสองคอลัมน์

 body {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

⭐ ใช้คุณสมบัติ place-items เพื่อจัดเนื้อหาของตารางให้อยู่ตรงกลาง ทั้งแนวนอนและแนวตั้ง

 body {
  place-items: center;
}

⭐ จัดรูปแบบพื้นหลังขององค์ประกอบ div เพื่อให้เห็นภาพที่กึ่งกลางของคอนเทนเนอร์ตาราง

 div {
  background-color: blue;
}

ในกรณีนี้ คุณลักษณะเดี่ยวจะควบคุมตำแหน่งสูงสุดขององค์ประกอบ Div บนหน้าเว็บของคุณ:

การใช้การวางตำแหน่ง CSS เพื่อจัดองค์ประกอบ Div ให้อยู่ตรงกลาง

การวางองค์ประกอบ Div ไว้ตรงกลางโดยใช้คุณสมบัติ position ของ CSS จำเป็นต้องเข้าใจถึงวิธีการทำงานของการแปลงและการเปลี่ยน CSS ความเข้าใจนี้ช่วยให้สามารถจัดตำแหน่งองค์ประกอบภายในคอนเทนเนอร์หลักได้อย่างเหมาะสม ขั้นตอนโดยละเอียดมีให้ด้านล่างพร้อมตัวอย่างประกอบ

⭐ หากต้องการวางตำแหน่งองค์ประกอบ div ตรวจสอบให้แน่ใจว่าคอนเทนเนอร์นั้นมีตำแหน่งที่สัมพันธ์กัน ซึ่งจะสร้างบริบทการวางตำแหน่งที่สัมพันธ์กัน ดังนั้นคุณจึงสามารถวาง div ไว้ตรงกลางคอนเทนเนอร์ได้

 body {
  position: relative;
}

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

 div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
 background-color: green;
}

การแปลงการแปล (-50%,-50%) จะย้าย div ไปทางซ้ายและขึ้นไปครึ่งหนึ่งของความกว้างและความสูงครึ่งหนึ่ง

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

การวางตำแหน่ง Flexbox, CSS Grid และ CSS เป็นเทคนิคที่มีประสิทธิภาพสูงในการจัดกึ่งกลางเนื้อหาบนเว็บไซต์ ด้วยการใช้ Flexbox เราสามารถจัดกึ่งกลางแนวนอนและแนวตั้งได้อย่างง่ายดายด้วยการเขียนโค้ดเพียงเล็กน้อย CSS Grid นำเสนอความสามารถในการจัดตำแหน่งที่มีประสิทธิภาพในสองมิติ ในขณะที่การใช้การวางตำแหน่ง CSS ช่วยให้สามารถจัดตำแหน่งองค์ประกอบให้อยู่ตรงกลางโดยสัมพันธ์กับองค์ประกอบหลักที่มีองค์ประกอบหลักอยู่

ด้วยการใช้วิธีการดังกล่าว จึงเป็นไปได้ที่จะรับประกันรูปลักษณ์ที่สวยงามและสวยงามสำหรับเว็บไซต์ของตน