توسيط عمودي للفقرات في CSS

عندما تستخدم خاصية vertical-align في CSS، فإنها تعمل على تحديد توجيه العناصر داخل عنصر واحد بالنسبة لبعضها البعض، مثل عناصر الصفحة داخل الخلية أو الخلايا داخل الصف في جدول HTML. ومع ذلك، فإنها لا تعمل على توسيط عناصر داخل عنصر توازي ابنه. لتحقيق التوسيط الرأسي للفقرات داخل div الخاص بها، يمكنك استخدام خاصية display: flex مع بعض القواعد الإضافية. يمكنك تغيير الكود الخاص بك إلى ما يلي:

cssCopy code
.col-sm-4 {
  text-align: right;
  display: flex;
  align-items: center; /* يوسط عموديًا */
  justify-content: center; /* يوسط أفقيًا */
}

باستخدام display: flex، يتم وضع العناصر داخل div في صف واحد، ثم باستخدام align-items: center و justify-content: center، يتم توسيطها عموديًا وأفقيًا داخل div الخاص بها.

يرجى تجربة هذا التغيير والتأكد من أنه يحقق النتيجة المطلوبة.

بالطبع! في CSS، خاصية vertical-align تُستخدم بشكل رئيسي مع عناصر display: inline أو display: inline-block، وتحدد توجيه العناصر النصية أو الصور داخل العناصر الأخرى.

تُستخدم القيمة middle لتوسيط العنصر النصي عموديًا داخل العنصر الأب. ولكن، عندما يكون العنصر الأب display: block، فإن vertical-align: middle لا يؤثر على عناصره الابنة بنفس الطريقة. لتوسيط العنصر النصي عموديًا بشكل صحيح، يجب أن يكون العنصر الأب display: inline-block أو display: flex، وبالتالي يمكن تطبيق vertical-align: middle عليه.

في حالة عدم عمل الحل السابق، يجب التحقق من أن العنصر الأب للفقرات لديه ارتفاع ثابت أو محدد بوحدة قابلة للقياس مثل البكسل، وليس ارتفاعًا متغيرًا أو غير معروف. إذا كان ارتفاع العنصر الأب متغيرًا، فإن vertical-align قد لا تعمل بشكل صحيح.

إذا كانت لديك مزيد من الاستفسارات أو إذا كنت بحاجة إلى مساعدة إضافية، فلا تتردد في طرحها!