Width and centering · ความกว้างและการจัดกึ่งกลาง
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · หน้านี้ต้องใช้เบราว์เซอร์ล่าสุด (รองรับ SharedArrayBuffer) กรุณาอัปเดต Chrome, Edge, Firefox หรือ Safari เป็นเวอร์ชันล่าสุด
English
Width
- By default, a block box is as wide as the page.
width: 300px;makes it a fixed width instead.max-width: 600px;is gentler — at most this wide, but shrink on small screens.
ไทย
ความกว้าง
- โดย default, กล่อง Block จะมีความ กว้างเท่าหน้าเว็บ
width: 300px;เปลี่ยนเป็นความกว้างคงที่แทนmax-width: 600px;อ่อนโยนกว่า — สูงสุดเท่านี้ แต่จะหดเมื่อหน้าจอเล็ก
English
Centering a box
- To center a box (not just its text), give it a width, then
margin: 0 auto;. 0 automeans no top/bottom margin, and equal left/right margins.- Equal side margins push the box into the middle.
ไทย
จัดกึ่งกลางกล่อง
- เพื่อจัดกึ่งกลาง กล่อง (ไม่ใช่แค่ข้อความ), ให้ความกว้างแล้วตามด้วย
margin: 0 auto; 0 autoหมายความว่าไม่มี Margin บน/ล่าง และมี Margin ซ้าย/ขวา เท่ากัน- Margin ด้านข้างเท่ากันจะดันกล่องไปตรงกลาง
<style>
.card {
width: 280px;
margin: 0 auto;
padding: 16px;
background-color: #eef;
}
</style>
<div class="card">A centered card.</div>
English
Common mistakes
- Centre a block with a set width using
margin: 0 auto. - A width in
%is relative to the parent element.
ไทย
ข้อผิดพลาดที่พบบ่อย
- จัดกึ่งกลาง Block ที่มีความกว้างกำหนดไว้โดยใช้
margin: 0 auto - ความกว้างใน
%เป็นสัมพัทธ์ต่อ elementแม่
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
ไทย
ลองดูเลย
- กล่องต้องมีความกว้างก่อน
margin: 0 auto;จึงจะจัดกึ่งกลางได้ - กำหนดความกว้าง แล้วจัดกึ่งกลางการ์ด
Explore · สำรวจ
Width and the box · ความกว้างและกล่อง
Width sets the content size; padding/border/margin add around it. · ความกว้างกำหนดขนาด content; padding/border/margin เพิ่มเข้าไปรอบนอก
Give the card a fixed width. Add width: 300px; to the .card rule. · กำหนดความกว้างตายตัวให้กับการ์ด เพิ่ม width: 300px; ในกฎ .card
Center the card on the page. Add margin: 0 auto; to the .card rule. · จัดกึ่งกลางการ์ดบนหน้าเว็บ เพิ่ม margin: 0 auto; ในกฎ .card