CSS Vertical Alignment
محاذاة النصوص رأسياً في لغة CSS
ستتعلم في هذا الدرس محاذاة النصوص عن طريق خصائص تعديل وتحريك مًوضع النصوص علي المتصفح بلغة CSS وهذة الخصائص يمكن من خلالها اللتحكم في طريقة عرض النصوص رأسياً من جهة [ أعلي - أسفل - المنتصف ] علي المتصفح.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Text Alignment
محاذاة النصوص رأسياً في لغة CSS
</>
CSS vertical align
خاصية vertical-align في لغة CSS
- 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;
ملاحظات
</>
CSS vertical align baseline
القيمة baselineمع خاصية vertical-align في لغة CSS
تًستخدم خاصية vertical-align مع القيمة baseline ليكون النص علي نفس السطر وهي الحالة الأفتراضية.
CSS vertical align baseline
يكون النص علي نفس السطر مع خاصية vertical-align والقيمة text top في لغة CSS.
img
{
vertical-align:baseline;
}
</>
CSS vertical align text top
القيمة text top مع خاصية vertical-align في لغة 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
CSS vertical align text bottom
يكون النص أعلي السطر مع خاصية vertical-align والقيمة text top في لغة CSS.
img
{
vertical-align:text-bottom;
}
</>
CSS vertical align text super
القيمة super مع خاصية vertical-align في لغة CSS
CSS vertical align text super
يكون النص أعلي السطر مع خاصية vertical-align والقيمة super في لغة CSS.
img
{
vertical-align:super;
}
</>
CSS vertical align text sub
القيمة sub مع خاصية vertical-align في لغة CSS
CSS vertical align text sub
يكون النص أسفل السطر مع خاصية vertical-align والقيمة sub في لغة CSS.
img
{
vertical-align:sub;
}
</>
CSS vertical-align Multi
مقارنة بين جميع القيم مع خاصية 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;
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
