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.
العربية
العرض
- افتراضياً، يكون الصندوق الكتلي بعرض الصفحة بالكامل.
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يعني عدم وجود هوامش علوية/سفلية، وتساوي الهوامش اليمنى/اليسرى.- الهوامش الجانبية المتساوية تدفع الصندوق إلى المنتصف.
<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.
العربية
أخطاء شائعة
- وسّط صندوق كتلي بعرض محدد باستخدام
margin: 0 auto. - العرض في
%يكون نسبياً بالنسبة للعنصر الأب.
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.
Give the card a fixed width. Add width: 300px; to the .card rule.
Center the card on the page. Add margin: 0 auto; to the .card rule.