خاصية vertical-align
آخر تحديث: 2026-09-13
vertical-align خاصية vertical-align
تتحكم خاصية vertical-align في CSS في المحاذاة الرأسية للعناصر السطرية أو لمحتوى داخل خلايا الجدول. تدعم كلمات مفتاحية مثل top وmiddle وbaseline وقيم الطول والنسبة المئوية، وتُستخدم عادةً لمحاذاة الأيقونات مع النص وتحريك العناصر السطرية أو ت positioning محتوى خلايا الجدول. لاحظ أن vertical-align لا يؤثر على العناصر على مستوى الكتلة.
| الفئة | |
|---|---|
| القيمة الأولية | baseline |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
baseline | sub | super | text-top | text-bottom | middle | top | bottom | كلمة مفتاحية | كلمات محاذاة رأسية |
<length> | <percentage> | النوع | قيمة إزاحة دقيقة كطول أو نسبة مئوية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| vertical-align | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يحاذي vertical-align بالنسبة إلى صندوق السطر الحالي أو خلية الجدول، وليس بالنسبة إلى الحاوية الأصل ككل.
تحذير： لا يؤثر vertical-align على العناصر على مستوى الكتلة مثل div أو p. لمركز عنصر الكتلة عموديًا، استخدم Flexbox أو Grid.
❓ الأسئلة الشائعة
Qلماذا لا يُوسّط vertical-align: middle عنصرًا عموديًا؟
Aيحاذي vertical-align: middle نقطة منتصف العنصر الرأسية مع خط الأساس الأصلي مضافًا إليه نصف الارتفاع-x؛ وليس توسيطًا بالنسبة إلى الحاوية الأصل. فهو مخصص للضبط الدقيق للعناصر السطرية، لا لحل حقيقي للتوسيط الرأسي.
Qلماذا توجد فجوة أسفل الصور السطرية داخل فقرة في HTML؟
Aالصور سطرية افتراضيًا، ويحجز السطر مساحة للأجزاء الهابطة أسفل الخط الأساسي. يؤدي ضبط vertical-align: bottom أو middle أو top — أو display: block — إلى إزالة تلك الفجوة.
Qكيف أوسّط صورة سطرية مع النص المجاور عموديًا باستخدام CSS؟
Aاكتب vertical-align: middle على الصورة أو العنصر السطري المجاور فيبدوان مُوسّطين مع النص. لمحاذاة أدق، اجعل الصورة display: inline-block مع vertical-align: middle، أو استخدم Flexbox مع align-items: center.
Qلماذا تتجاهل خاصية vertical-align عناصر div وp؟
Aلا يُطبَّق vertical-align إلا على العناصر السطرية والسطرية-الكتلية وخلايا الجدول (td/th)، بحيث تُحاذى بالنسبة إلى خط الأساس لسطرها؛ أما عناصر الكتلة مثل div وp فلا تتأثر. ولتوسيط عناصر الكتلة عموديًا استخدم Flexbox أو Grid.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
