انتقل إلى محتوى الدرس

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

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

1 صفوف تعليمية
لغة CSS
5,888 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تستخدم 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;