كيفية تحديد موضع عناصر الويب باستخدام المحاذاة العمودية لـ CSS

بحث جوجل









منظر طبيعى
وصف






غابة

أبجد هوز دولور الجلوس امات.






محيط

أبجد هوز دولور الجلوس امات.

ال كود HTML أعلاه ينشئ صفحة ويب بسيطة تعرض أربعة عناصر: نص مرتبط وصورة ومقطع فيديو مضمن وجدول. يجب أن يبدو هكذا في متصفحك:

كيفية محاذاة النص عموديًا

بشكل افتراضي ، فإن معظم عناصر النص (مثل العناوين ،

، و

ومع ذلك ، فإن بعض عناصر النص مثل و العلامة مضمنة. نتيجة لذلك ، فإنها تدعم خاصية المحاذاة الرأسية. لمحاذاة النص عموديًا ، ما عليك سوى تعيين القيمة المناسبة لخاصية المحاذاة الرأسية لـ CSS.

استخدام القيمة العلوية للمحاذاة الرأسية على النص

أ {
 محاذاة عمودية: أعلى ؛
}

مضيفا كود CSS أعلاه إلى مستند HTML الأساسي سيتم محاذاة الجزء العلوي من ملف وضع علامة على النص بأعلى أطول عنصر في السطر. إنتاج العرض المحدث التالي:

استخدام قيمة النسبة المئوية على النص

أ {
 محاذاة عمودية: -50٪ ؛
}

يقوم CSS أعلاه بمحاذاة عنصر النص في موضع يكون بنسبة 50٪ أسفل الخط الأساسي للعنصر الأصل. ينتج عنه الإخراج التالي في متصفحك:

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

استخدام قيمة الطول على النص

أ {
 محاذاة عمودية: 90 بكسل ؛
}

يحاذي الكود أعلاه الخط الأساسي لعنصر النص بطول 90 بكسل فوق الخط الأساسي للعنصر الأصل. ينتج عن هذا الإخراج التالي في المستعرض:

كيفية محاذاة الصور رأسيًا

ال العلامة عنصر مضمن ، تعمل معه خاصية المحاذاة الرأسية لـ CSS بشكل جيد.

استخدام القيمة الفائقة للمحاذاة الرأسية على الصور

img {
 محاذاة عمودية: فائقة ؛
}

يضع الكود أعلاه الصورة عند خط الأساس المرتفع للعنصر الأصل. هذا يعني أنه في موضع أعلى من خط الأساس ، كما ترى في الإخراج التالي:

استخدام قيمة النسبة المئوية للمحاذاة الرأسية على الصور

img {
 محاذاة عمودية: 25٪ ؛
}

يحاذي الكود أعلاه الخط الأساسي لعنصر الصورة بنسبة 25٪ أعلى من الخط الأساسي للعنصر الأصل. ينتج عن هذا التأثير المرآة التالي للقيمة الفائقة:

استخدام قيمة الطول ذات المحاذاة الرأسية على الصور

img {
 محاذاة عمودية: 5 بكسل ؛
}

يحاذي الكود أعلاه الخط الأساسي لعنصر الصورة عند موضع 5 بكسل فوق الخط الأساسي للعنصر الأصل. ينتج عن هذا تأثير مشابه لتأثير القيم الفائقة و 25٪:

الوسائط المضمنة مثل مقاطع الفيديو وإطارات iframes هي عناصر HTML مضمنة. لذلك ، تعمل خاصية المحاذاة الرأسية CSS بشكل رائع معهم.

استخدام القيمة الفائقة ذات المحاذاة الرأسية على الفيديو

فيديو {
 محاذاة عمودية: فرعية ؛
}

يضع الكود أعلاه الفيديو عند خط الأساس المنخفض للعنصر الأصل. هذا يعني في موضع أسفل خط الأساس ، كما ترى في المخرجات التالية:

استخدام قيمة النسبة المئوية للمحاذاة الرأسية على مقطع فيديو

فيديو {
 محاذاة عمودية: -25٪ ؛
}

يحاذي الكود أعلاه الخط الأساسي لعنصر الفيديو عند 25٪ أسفل الخط الأساسي للعنصر الأصلي. ينتج عن ذلك تأثير المرآة التالي للقيمة الفرعية:

استخدام قيمة الطول ذات المحاذاة الرأسية في الفيديو

فيديو {
 محاذاة عمودية: -5 بكسل ؛
}

يحاذي الكود أعلاه الخط الأساسي لعنصر الصورة عند موضع 5 بكسل أسفل الخط الأساسي للعنصر الأصل. ينتج عن هذا تأثير مثل القيم الفرعية و -25٪:

كيفية المحاذاة الرأسية للعناصر في الجدول

يعد استخدام خاصية المحاذاة الرأسية مع الجدول أمرًا صعبًا بعض الشيء ، حيث أن الجدول عنصر كتلة. ومع ذلك ، فإن

استخدام القيمة العلوية للمحاذاة الرأسية في بيانات الجدول

td {
 الارتفاع: 40 بكسل ؛
 محاذاة عمودية: أعلى ؛
}

يضيف الكود أعلاه ارتفاعًا قدره 40 بكسل لكل خلية في الجدول. ثم يقوم بمحاذاة البيانات الموجودة في كل خلية مع الجزء العلوي من كل صف. ينتج عن هذا الإخراج التالي في المستعرض:

استخدام القيمة المتوسطة ذات المحاذاة الرأسية في بيانات الجدول

td {
 الارتفاع: 40 بكسل ؛
 محاذاة عمودية: وسط ؛
}

تعمل القيمة الوسطى ذات المحاذاة الرأسية في الكود أعلاه على توسيط البيانات داخل كل خلية بشكل عمودي. ينتج في المتصفح الإخراج التالي:

استخدام القيمة السفلية ذات المحاذاة الرأسية في بيانات الجدول

td {
 الارتفاع: 40 بكسل ؛
 محاذاة عمودية: أسفل ؛
}

يقوم الكود أعلاه بمحاذاة البيانات الموجودة في كل خلية إلى أسفل كل صف. ينتج في المتصفح الإخراج التالي:

يمكنك الآن محاذاة العناصر على صفحة الويب الخاصة بك

يمكنك الآن استخدام خاصية المحاذاة الرأسية CSS مع مجموعة من العناصر المضمنة المختلفة ، بما في ذلك النص والوسائط المضمنة وبيانات الجدول. القاعدة العامة هي أن خاصية المحاذاة الرأسية تعمل فقط على العناصر المضمنة والمضمنة.

ومع ذلك ، يمكنك استخدام هذه الخاصية على عناصر الكتلة ، ما عليك سوى تحويلها إلى عناصر مضمنة أو مضمنة أولاً. تذكر أنه يمكنك دمج المحاذاة الرأسية مع خصائص المحاذاة الأخرى ، مثل محاذاة النص.

نبذة عن الكاتب

قاديشا كين (تم نشر 52 مقالة)

قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مواد يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).

المزيد من Kadeisha Kean