วิธีจัดวางเลย์เอาต์ของคุณให้อยู่ตรงกลางด้วย CSS

เรียนรู้สองวิธีในการจัดวางเค้าโครงหน้าเว็บของคุณให้อยู่กึ่งกลางด้วย CSS

สมมติว่าคุณกำลังจัดรูปแบบเค้าโครงบทความสำหรับเว็บไซต์ของคุณ และต้องการจัดตำแหน่ง <article> ให้อยู่กึ่งกลาง องค์ประกอบตามแนวนอนตรงกลางหน้าของคุณ

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

คุณสามารถทำตามได้โดยใช้ตัวแก้ไข CodePen ฟรี

ใช้มาร์กอัป HTML พื้นฐานต่อไปนี้สำหรับการจัดวางบทความ:

<article>
  <h1>Title for your article</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
    dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
    recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
    reprehenderit error.
  </p>
</article>

และบล็อกการประกาศ CSS ต่อไปนี้:

article {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

การดำเนินการนี้จะจัดเค้าโครงบทความของคุณให้อยู่ตรงกลางหน้าเว็บของคุณพอดี

max-width คุณสมบัติจำเป็นต้องจัดองค์ประกอบให้อยู่กึ่งกลางในแนวนอน เพราะไม่เช่นนั้น ข้อความจะขยายจากขอบซ้ายไปขวาของหน้าโดยอัตโนมัติ

จัดกึ่งกลางในแนวนอนด้วย flexbox

คุณยังสามารถจัดกึ่งกลางโดยใช้ flexbox . ที่ทันสมัย คุณสมบัติ. เนื่องจากทาง flexbox ส่งต่อคุณสมบัติไปยังองค์ประกอบย่อย วิธีที่ง่ายที่สุดในการจัดวางเค้าโครงของคุณให้อยู่ตรงกลางคือการห่อ <article> ของคุณ องค์ประกอบในองค์ประกอบอื่น แล้วเพิ่ม flexbox คุณสมบัติขององค์ประกอบหลักใหม่นั้น

มาห่อองค์ประกอบบทความจากก่อนหน้านี้ด้วย <main> องค์ประกอบ:

<main>
  <article>
    <h1>Title for your article</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
      dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
      recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
      reprehenderit error.
    </p>
  </article>
</main>

และย้ายคุณสมบัติ flexbox (ไม่ใช่ max-width ) จาก article { } บล็อกการประกาศไปยัง main { }ใหม่ บล็อก:

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

article {
  max-width: 640px;
}

ซึ่งจะทำงานเหมือนกับ margin: auto ประกาศที่คุณเห็นก่อนหน้านี้