كيفية توسيط عنصر div عموديًا لجميع المتصفحات التي تستخدم CSS

في تطوير الويب ، من الضروري إنشاء تخطيط العنصر بشكل صحيح. ومع ذلك ، فإن العديد من خصائص CSS ، مثل CSS3 Flexible Box ، مفيدة لضبط تخطيط صفحات الويب وعناصر HTML. يستخدم الصندوق المرن لترتيب صفحات الويب والتطبيقات بطريقة متكررة. يساعد وضع Flexbox هذا في إنشاء تخطيطات لصفحات الويب والتطبيقات المعقدة.

سيرشدك هذا المنشور إلى كيفية توسيط عنصر div لجميع المتصفحات التي تستخدم CSS عموديًا.

كيفية محاذاة عنصر div باستخدام CSS؟

يمكن محاذاة عنصر div عموديًا باستخدام خاصية العرض ' ثني 'جنبًا إلى جنب مع CSS' محاذاة العناصر 'الملكية و' تبرير المحتوى ' خاصية. تقوم خاصية 'align-items' بمحاذاة العنصر رأسياً ، وتقوم خاصية 'justify-content' بمحاذاة المحتوى أفقيًا.

مثال: كيفية توسيط عنصر div عموديًا باستخدام CSS؟

في HTML ، أضف أولاً '

'وتخصيص الفئة' المحتوى الرئيسي '. بين علامتي '

' ، أضف علامة ' 'بالسمات التالية:

---

---

• ' src 'لتحديد عنوان URL للصورة.
• ' كل شيء 'السمة' بعض النصوص التي سيتم عرضها بدلاً من الصورة إذا فشل تحميلها.
• ' العرض 'لضبط عرض الصورة.
• ثم أضف '

  'لتضمين الفقرة في الصفحة.

ها هي كود HTML:

< شعبة صف دراسي = 'المحتوى الرئيسي' >
< IMG src = '/images/l laptop-notepad.jpg' كل شيء = 'كمبيوتر محمول مزود بمفكرة وقلم' العرض = '300' >
< ص > الكمبيوتر المحمول هو كمبيوتر محمول معروف أيضًا مثل كمبيوتر محمول. ص >
شعبة >

في CSS ، سنحدد العديد من خصائص التصميم لملف div.

نمط فئة 'المحتوى الرئيسي'

.المحتوى الرئيسي {
ارتفاع: خمسون ٪ ؛
لون الخلفية: # 46C2CB ؛
حجم الخط: 24 بكسل ؛
الحشو: 10 بكسل ؛
}

يتم تحديد خصائص CSS التالية في ' المحتوى الرئيسي ' صف دراسي:

• ' ارتفاع 'لضبط ارتفاع الحاوية
  .
• ' لون الخلفية 'لون خلفية العنصر.
• ' حجم الخط 'حجم خط العنصر.
• ' حشوة 'تحدد مساحة حول محتوى العنصر.

من الإخراج ، يمكنك ملاحظة أن محتوى عنصر div ليس في المركز:

دعنا نمضي قدمًا في تطبيق خصائص CSS التي تساعد في توسيط '

'عموديًا. أضف هذه الخصائص إلى الفصل ' المحتوى الرئيسي ”التي يتم استخدامها للوصول إلى عنصر

:

عرض: ثني ؛
محاذاة العناصر: مركز ؛

ها هو الوصف:

• ' عرض ' خاصية ' ثني 'لجعل تخطيط div مرنًا لعنصره.
• ' محاذاة العناصر 'تم تعيين خاصية CSS على أنها' المركز '، والتي ستعمل على محاذاة عناصر div رأسياً.

انتاج |

لقد تعلمت كيفية توسيط عنصر div عموديًا لجميع المتصفحات التي تستخدم CSS.

استنتاج

لتوسيط عنصر div عموديًا ، فإن CSS ' عرض 'يتم استخدام الخاصية مع' ثني ' القيمة. هذه القيمة تجعل الحاوية

مرنة لعناصرها. لمحاذاة عنصر div عموديًا ، اضبط ' محاذاة العناصر 'وتعيين' المركز ' القيمة. لقد أوضحت لك هذه المدونة كيفية استخدام CSS لتوسيط عناصر div عموديًا في جميع المتصفحات.