CSS

CSS Vertical Alignment
محاذاة النصوص رأسياً في لغة CSS

ستتعلم في هذا الدرس محاذاة النصوص عن طريق خصائص تعديل وتحريك مًوضع النصوص علي المتصفح بلغة CSS وهذة الخصائص يمكن من خلالها اللتحكم في طريقة عرض النصوص رأسياً من جهة [ أعلي - أسفل - المنتصف ] علي المتصفح.

التاريخ

29 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1532

المواضيع

24
الشروحات chevron_left CSS Vertical Alignment chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Text Alignment
محاذاة النصوص رأسياً في لغة CSS

</> CSS vertical align
خاصية vertical-align في لغة CSS

تستخدم خاصية vertical-align للتحكم في محاذاة النصوص بشكل أفقي وتُعطي المرونة ليبدأ عرض النص من جهة اليمين أو اليسار أو المنتصف داخل العنصر في لغة CSS.


قيم خاصية text-align:
  • baseline تبدأ النصوص من علي نفس السطر للعنصر.
  • text-top تبدأ النصوص من أعلي العنصر.
  • text-bottom تبدأ النصوص من أسفل العنصر.
  • sub لتبدأ النصوص من أسفل العنصر.
  • super تبدأ النصوص من أعلي العنصر.
vertical-align syntax

طريقة كتابة خاصية vertical-align في لغة CSS.

vertical-align:value;
vertical-align values

قيم خاصية vertical-align في لغة CSS.

vertical-align:baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
ملاحظات
إذا كانت صفحة الويب باللغة العربية فخاصية text-align تستخدم لمحاذاة نصوص العناصر من جهة اليمين والعكس إذا كانت صفحة الويب باللغة الأنجليزية.

</> CSS vertical align baseline
القيمة baselineمع خاصية vertical-align في لغة CSS

تًستخدم خاصية  vertical-align مع القيمة baseline ليكون النص علي نفس السطر وهي الحالة الأفتراضية.

CSS vertical align baseline

يكون النص علي نفس السطر مع خاصية vertical-align والقيمة text top في لغة CSS.

img
{
  vertical-align:baseline;
}
تُعرض النصوص بداخل العناصر بشكل إفتراضي من في نفس السطر بدون إستخدام قيمة vertical-align مع القيمة baseline قد لا تلاحظ تغيير في محاذاة النص رأسياً لهذا السبب.

</> CSS vertical align text top
القيمة text top مع خاصية vertical-align في لغة CSS

تًستخدم خاصية  vertical-align مع القيمة text top لتغيير طريقة بدأ النص رأسياً ويبدأ من أعلي السطر داخل عناصر HTML بلغة CSS.
CSS vertical align text top

يكون النص أعلي السطر مع خاصية vertical-align والقيمة text top في لغة CSS.

img
{
  vertical-align:text-top;
}

</> CSS vertical align text bottom
القيمة text bottom مع خاصية vertical-align في لغة CSS

تًستخدم خاصية  vertical-align مع القيمة text bottom لتغيير طريقة بدأ النص رأسياً ويبدأ من أسفل السطر داخل عناصر HTML بلغة CSS.
CSS vertical align text bottom

يكون النص أعلي السطر مع خاصية vertical-align والقيمة text top في لغة CSS.

img
{
  vertical-align:text-bottom;
}

</> CSS vertical align text super
القيمة super مع خاصية vertical-align في لغة CSS

تًستخدم خاصية  vertical-align مع القيمة sub لتغيير طريقة بدأ النص رأسياً ويبدأ من أسفل السطر داخل عناصر HTML بلغة CSS.
CSS vertical align text super

يكون النص أعلي السطر مع خاصية vertical-align والقيمة super في لغة CSS.

img
{
  vertical-align:super;
}

</> CSS vertical align text sub
القيمة sub مع خاصية vertical-align في لغة CSS

تًستخدم خاصية  vertical-align مع القيمة sub لتغيير طريقة بدأ النص رأسياً ويبدأ من أسفل السطر داخل عناصر HTML بلغة CSS.
CSS vertical align text sub

يكون النص أسفل السطر مع خاصية vertical-align والقيمة sub في لغة CSS.

img
{
  vertical-align:sub;
}

</> CSS vertical-align Multi
مقارنة بين جميع القيم مع خاصية vertical-align في لغة CSS

مثال يجمع جميع قيم خاصية vertical-align في لغة CSS.
CSS vertical-align Multi

قارن بين جميع القيم في هذا المثال مع خاصية vertical-align في لغة CSS.

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.