English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يُستخدم خاصية CSS vertical-align لتعريف طريقة التوازي العمودي للصناديق المدمجة أو خلايا الجدول. vertical-align هي واحدة من خصائص CSS المهمة. قد يكون من الصعب للمرء الجديد أن يتعلمها في البداية، لكن هناك أمثلة في نهاية المقال لمساعدتك على فهم وتعلم هذه الخاصية بسرعة.
يُطبق على العناصر المدمجة أو العناصر المدمجة.
يؤثر على طريقة التوازي للعنصر دون التأثير على محتواه (استثناءًا عن خلايا الجدول)
عند تطبيقه على خلية الجدول، يؤثر على محتوى الخلية وليس الخلية نفسها.
| القيمة | الوصف |
|---|---|
| baseline | يُساوي خط الأساس للعنصر بخط الأساس للبصمة. هذا هو القيمة الافتراضية. |
| length | يُستخدم لزيادة أو تقليل طول العنصر بناءً على الطول المحدد. يمكن أيضًا استخدام القيم السلبية. |
| % | يُستخدم لزيادة أو تقليل حجم العنصر بناءً على نسبة "ارتفاع السطر". يمكن استخدام القيم السلبية. |
| sub | يقوم بتوجيه العنصر كما لو كان علامة تحت. |
| super | يقوم بتوجيه العنصر كما لو كان علامة فوق. |
| top | يوضع أعلى العنصر مع أعلى العنصر في السطر. |
| bottom | يوضع أسفل العنصر مع أدنى العنصر في السطر. |
| text-top | يوضع العنصر مع أعلى الخط في العنصر الأب. |
| middle | يوضع العنصر في منتصف العنصر الأب. |
| text-bottom | يوضع أسفل العنصر مع أسفل الخط في العنصر الأب. |
| initial | يضبط هذا الخصائص إلى قيمته الافتراضية. |
| inherit | تنقل هذا الخصائص من عنصر الأب. |
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="/run/images/heart.jpg" alt="نمط قلب"/> هذه صورة تحتاج إلى تنسيق افتراضي.</p>
<p><img src="/run/images/heart.jpg" style="vertical-align: text-top;" alt="نمط قلب"/> هذه صورة تحتاج إلى تنسيق أعلى النص.</p>
<p><img src="/run/images/heart.jpg" style="vertical-align: text-bottom;" alt="نمط قلب"/> هذه صورة تحتاج إلى تنسيق أسفل النص.</p>
</body>
</html>الاختبار ألق نظرة‹/›النتيجة:
هذه صورة تحتاج إلى تنسيق افتراضي.
هذه صورة تحتاج إلى تنسيق أعلى النص.
هذه صورة تحتاج إلى تنسيق أسفل النص.