كيفية توسيط العناصر باستخدام لغة css
 |
| موقع المقدم لتعلم لغات البرمجة |
السلام عليكم ورحمة الله وبركاته
سنتعرف في هذا الدرس علي طريقة توسيط النصوص والصور وجميع العناصر باستخدام لغة css, في لغة css اكثر من طريقة لتوسيط العناصر منها الازاحة الخارجية فيما يلي شرح مفصل للكود الاتي .
كود توسيط النصوص باستخدام لغة css
لاحظ هذا الكود :
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>موقع المقدم لتعلم لغات البرمجة</h1>
</body>
شرح الكود السابق :
- قمنا بوضع العنصر <h1> بين وسمين <body> وهذا العنصر الذي نريد توسيطه
- ثم قمنا بوضع المحدد h1 بين وسمين <style> واضفنا اليه الخاصية text-align واضفنا اليه القيمة center لتوسيط العناصر
 |
| الصورة الظاهرة لتوضيح الكود |
# الكود المستخدم في المثال السابق :
h1{
text-align: center;
}
الخاصية text-align تقبل العديد من القيم منها center لتوسيط العناصر / right لجعل العنصر ناحية اليمين / left لجعل العناصر ناحية اليسار
كود توسيط الصور باستخدام لغة css
لاحظ هذا الكود :
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="display flex.jpg.png" alt="">
</div>
</body>
نلاحظ من الكود السابق :
- الطريقة المستخدمة لتوسيط الصورة هي نفس الطريقة التي استخدمناها لتوسيط النص وهي الخاصية text-align ونضع القيمة center ولكن لابد من وضع الصورة داخل الوسم <div> وبهذا نكون قد قمنا بتوسيط العنصر div ولاكن هذه الخاصية لا تصلح مع العنصر image
كود توسيط مجموعة من العناصر
لاحظ هذا الكود :
<style>
div {
width: 20%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
<input type="text"><br><br>
<img src="https://i.top4top.io/p_24352ptfp1.png" width="200px" height="200px" alt="">
</div>
</body>
شرح الكود السابق :
1. قمنا بوضع مجموعة من العناصر داخل الوسم <div> ونريد توسيط هذ العنصر <div> نستخدم المحددين
margin-right / margin -left واضفتا بداخلهم القيمة auto
# ملاحظة هامة:
1. يفضل توسيط العناصر في لغة css بوضع العناصر داخل العنصر <div>
2. الخاصيتين margin-left / margin-right نستخدمهم في توسيط العنصر <div> ولكي نوسط العناصر الموجودة داخل العنصر <div> نستخدم الخاصية text-align:center
 |
| الصورة الظاهرة لتوضيح الكود |
نلاحظ من هذه الصورة :
1. قمنا بتوسيط اولا العنصر <div> عن طريق الخاصيتين margin-left / margin-right
2. ثم قمنا بتوسيط العناصر الموجودة داخل العنصر <div> عن طريق الخاصية text-align:center
# الكود المستخدم في الصورة
div {
width: 20%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
text-align: center;
}
وفي نهاية هذا الدرس نرجو ان نكون قد افدناكم حتي لو بالقليل وشكرا
لاتنسي الانضمام الي قناة التليجرام ليصلك كل جديد : من هنا
تعليقات
إرسال تعليق