في هذا الثريد سوف نتعرف على
طرق توسيط العناصر أفقي أو عمودي
باستخدام css
ثريد ممتع إن شاء الله 😇
👇🏻
طرق توسيط العناصر أفقي أو عمودي
باستخدام css
ثريد ممتع إن شاء الله 😇
👇🏻
توسيط العناصر بإستخدام css
ليس سهل كما تظن
( توجد الكثير من الطرق 😖
من الصعب إختيار أفضل طريقة إذا كنت مبتدئ).
مع الممارسة المتواصلة
يمكنك إختيار أفضل طريق بكل سهولة 😉.
👇🏻
ليس سهل كما تظن
( توجد الكثير من الطرق 😖
من الصعب إختيار أفضل طريقة إذا كنت مبتدئ).
مع الممارسة المتواصلة
يمكنك إختيار أفضل طريق بكل سهولة 😉.
👇🏻
✳ أولا.
عناصر html تنقسم إلى قسمين
✴ inline , inline-block
مثل النصوص، الصور و الروابط
✴ Block
مثل عنصر p , div
و كل قسم يتم إستخدام
طريقة محدده في التوسيط.
بعض الطرق يمكن إستخدامها في القسمين 😉.
👇🏻
عناصر html تنقسم إلى قسمين
✴ inline , inline-block
مثل النصوص، الصور و الروابط
✴ Block
مثل عنصر p , div
و كل قسم يتم إستخدام
طريقة محدده في التوسيط.
بعض الطرق يمكن إستخدامها في القسمين 😉.
👇🏻
في هذا الثريد تم شرح الفرق بين
block
inline
inline-block
👇🏻
block
inline
inline-block
👇🏻
✳ توسيط عنصر
inline or inline-block
أفقي.
✴ أستخدم
text-align: center
في العنصر الأب
👇🏻
inline or inline-block
أفقي.
✴ أستخدم
text-align: center
في العنصر الأب
👇🏻
✳ توسيط عنصر block أفقي.
✴ في العنصر الإبن نحدد عرض محدد و
margin-left: auto;
margin-right: auto;
👇🏻
✴ في العنصر الإبن نحدد عرض محدد و
margin-left: auto;
margin-right: auto;
👇🏻
✳ توسيط العنصر
inline and inline-block
عمودي.
✴ إستخدام flex box في العنصر الأب.
الأسهل في التنفيذ.
يمكن إستبدال الكود في الصورة بهذه الطريقه
.parent {
display: flex;
align-items: center;
}
او إستخدام الكود الموجود في الصورة 😉.
👇🏻
inline and inline-block
عمودي.
✴ إستخدام flex box في العنصر الأب.
الأسهل في التنفيذ.
يمكن إستبدال الكود في الصورة بهذه الطريقه
.parent {
display: flex;
align-items: center;
}
او إستخدام الكود الموجود في الصورة 😉.
👇🏻
✴ بإستخدام line-height
هذه الطريقة ليست الأفضل خصوصا إذا لم تكن تعلم طول العنصر الأب 🙄
طريقتها سهله
قيمه ال line-height بنفس طول الأب.
👇🏻
هذه الطريقة ليست الأفضل خصوصا إذا لم تكن تعلم طول العنصر الأب 🙄
طريقتها سهله
قيمه ال line-height بنفس طول الأب.
👇🏻
✳ توسيط عنصر block عمودي.
✴ إستخدام flex box
في العنصر الأب
.parent {
display: flex;
align-items: center;
}
✴ إستخدام ال position و transform
من المهم أن يكون الأب relative
👇🏻
✴ إستخدام flex box
في العنصر الأب
.parent {
display: flex;
align-items: center;
}
✴ إستخدام ال position و transform
من المهم أن يكون الأب relative
👇🏻
✳ توسيط أكثر من عنصر block
✴ إستخدام flex box
مع تغيير
align-items: center
إلى
align-content: center
✴ إستخدام flex box
مع تغيير
align-items: center
إلى
align-content: center
⛔ في ثريد سابق شرحت الفرق بين
align-content and align-items
👇🏻
align-content and align-items
👇🏻
في ثريد قادم إن شاء الله
سوف نتعرف على
طريقه توسيط العناصر أفقي
و عمودي بنفس الوقت
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الويب
سوف نتعرف على
طريقه توسيط العناصر أفقي
و عمودي بنفس الوقت
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الويب
جاري تحميل الاقتراحات...