عن طريق العرض وماكس العرض و margin: auto;
كما ذكر في الفصل السابق. عنصر على مستوى الكتلة يأخذ دائما العرض الكامل المتاحة (تمتد إلى اليمين واليسار بقدر ما يمكن).
وضع width سوف عنصر على مستوى الكتلة منعه من التمدد إلى حواف من الحاوية الخاصة به. بعد ذلك، يمكنك تعيين الهوامش إلى السيارات، إلى مركز أفقيا العنصر داخل الحاوية الخاصة به. والعنصر يستغرق العرض المحدد، وسيتم تقسيم المساحة المتبقية بالتساوي بين هوامش اثنين:
ملاحظة: المشكلة مع <div> فوق يحدث عندما نافذة المتصفح هو أصغر من عرض العنصر. ثم يضيف متصفح شريط التمرير الأفقي إلى الصفحة.
باستخدام max-width بدلا من ذلك، في هذه الحالة، سوف يحسن التعامل مع المتصفح من نوافذ صغيرة. وهذا أمر مهم عند اتخاذ موقع صالحة للاستعمال في الأجهزة الصغيرة:
نصيحة: تغيير حجم نافذة المتصفح لأقل من 500px واسعة، لمعرفة الفرق بين عناصر div اثنين!
هنا مثال من عناصر div اثنين أعلاه:
مثال
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} انها محاولة لنفسك »