انتقل إلى محتوى الدرس

Center Element توسيط العنصر داخل صفحة الويب

سوف تتعلم في هذا الدرس كيف تُعرض العناصر علي المُتصفح وكل عنصر يُعرض داخل صندوق وكل صندوق يتكون من مجموعة مساحات يجب التعرف عليها قبل التعامل مع هذا الصندوق بلغة CSS.
1 صفوف تعليمية
لغة CSS
4,771 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
يمكن توسيط أي عنصر عن طريق خاصية margin-left وخاصية margin-right وتكون القيمة auto في لغة CSS.

CSS Box Model center

توسيط العنصر عن طريق خاصية margin بقيمة auto.

HTML
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px auto;
outline-offset:15px;
height:100px;
width:50%;
}

CSS Box Model center margin sides

توسيط العنصر عن طريق خاصية margin بقيمة auto.

HTML
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin-top:20px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
outline-offset:15px;
height:100px;
width:50%;
}