في هذا الدرس 7تصفّح المواضيع
تستخدم vertical-align لمحاذاة الصناديق السطرية وinline-block رأسيًا داخل السطر، وكذلك لمحاذاة محتوى خلايا الجدول. ليست خاصية للمحاذاة الأفقية، ولا لتوسيط أي عنصر block داخل حاويته.
baseline: محاذاة خط الأساس، وهي القيمة الابتدائية.text-topوtext-bottom: محاذاة أعلى العنصر أو أسفله مع أعلى خط الأب أو أسفله.subوsuper: وضع خط الأساس عند مستوى الكتابة السفلية أو العلوية.topوbottom: المحاذاة مع أعلى السطر أو أسفله؛ تختلفان عن text-top وtext-bottom.middle: منتصف العنصر عند خط أساس الأب مضافًا إليه نصف x-height. في خلايا الجدول تكون لها دلالة توسيط محتوى الخلية.
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;تحاذي baseline خط أساس العنصر مع خط أساس الأب. للعناصر المستبدلة مثل الصورة قواعد تحدد خط الأساس المستخدم؛ ليست المحاذاة إلى أعلى السطر.
CSS vertical align baseline
تستخدم الصورة vertical-align: baseline، وهي القيمة الابتدائية.
تحاذي text-top أعلى العنصر مع أعلى خط الأب، ولا تعني أعلى صندوق الصفحة أو أعلى السطر كله.
CSS vertical align text top
تتبع الصورة أعلى خط الأب باستخدام القيمة text-top.
تحاذي text-bottom أسفل العنصر مع أسفل خط الأب.
CSS vertical align text bottom
قيمة المثال هي text-bottom، فتتبع الصورة أسفل خط الأب.
ترفع القيمة super خط أساس العنصر إلى مستوى الكتابة العلوية بالنسبة إلى الأب.
CSS vertical align text super
لاحظ ارتفاع الصورة باستخدام vertical-align: super.
تخفض القيمة sub خط أساس العنصر إلى مستوى الكتابة السفلية بالنسبة إلى الأب.
CSS vertical align text sub
يكون النص أسفل السطر مع خاصية vertical-align والقيمة sub في لغة CSS.
يجمع المثال التالي خمس قيم للمقارنة: baseline وtext-top وtext-bottom وsub وsuper؛ ليست هذه جميع القيم المتاحة.
CSS vertical-align Multi
قارن مواضع الصور مع القيم الخمس المعروضة.
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;سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.