انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 09
دورة لغة CSS

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

ستتعلم في هذا الدرس محاذاة العناصر السطرية وinline-block ومحتوى خلايا الجدول رأسيًا باستخدام vertical-align، ومقارنة خط الأساس وأعلى خط الأب وأسفله والكتابة العلوية والسفلية.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
8
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,790
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

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

تستخدم vertical-align لمحاذاة الصناديق السطرية وinline-block رأسيًا داخل السطر، وكذلك لمحاذاة محتوى خلايا الجدول. ليست خاصية للمحاذاة الأفقية، ولا لتوسيط أي عنصر block داخل حاويته.

  • baseline: محاذاة خط الأساس، وهي القيمة الابتدائية.
  • text-top وtext-bottom: محاذاة أعلى العنصر أو أسفله مع أعلى خط الأب أو أسفله.
  • sub وsuper: وضع خط الأساس عند مستوى الكتابة السفلية أو العلوية.
  • top وbottom: المحاذاة مع أعلى السطر أو أسفله؛ تختلفان عن text-top وtext-bottom.
  • middle: منتصف العنصر عند خط أساس الأب مضافًا إليه نصف x-height. في خلايا الجدول تكون لها دلالة توسيط محتوى الخلية.
خاصية vertical-align في لغة CSS

vertical-align syntax

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

CSS 
vertical-align:value;

vertical-align values

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

CSS 
vertical-align:baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

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

تحاذي baseline خط أساس العنصر مع خط أساس الأب. للعناصر المستبدلة مثل الصورة قواعد تحدد خط الأساس المستخدم؛ ليست المحاذاة إلى أعلى السطر.

CSS vertical align baseline

تستخدم الصورة vertical-align: baseline، وهي القيمة الابتدائية.

HTML 
img
{
  vertical-align:baseline;
}
جرّب بنفسك

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

تحاذي text-top أعلى العنصر مع أعلى خط الأب، ولا تعني أعلى صندوق الصفحة أو أعلى السطر كله.

CSS vertical align text top

تتبع الصورة أعلى خط الأب باستخدام القيمة text-top.

HTML 
img
{
  vertical-align:text-top;
}
جرّب بنفسك

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

تحاذي text-bottom أسفل العنصر مع أسفل خط الأب.

CSS vertical align text bottom

قيمة المثال هي text-bottom، فتتبع الصورة أسفل خط الأب.

HTML 
img
{
  vertical-align:text-bottom;
}
جرّب بنفسك

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

ترفع القيمة super خط أساس العنصر إلى مستوى الكتابة العلوية بالنسبة إلى الأب.

CSS vertical align text super

لاحظ ارتفاع الصورة باستخدام vertical-align: super.

HTML 
img
{
  vertical-align:super;
}
جرّب بنفسك

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

تخفض القيمة sub خط أساس العنصر إلى مستوى الكتابة السفلية بالنسبة إلى الأب.

CSS vertical align text sub

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

HTML 
img
{
  vertical-align:sub;
}
جرّب بنفسك

CSS vertical-align Multi مقارنة بين خمس قيم لخاصية vertical-align في لغة CSS

يجمع المثال التالي خمس قيم للمقارنة: baseline وtext-top وtext-bottom وsub وsuper؛ ليست هذه جميع القيم المتاحة.

CSS vertical-align Multi

قارن مواضع الصور مع القيم الخمس المعروضة.

HTML 
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;
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…