في CSS، تتحكم خاصية المحاذاة العمودية في المحاذاة الرأسية لعناصر المستوى المضمن أو خلايا الجدول داخل العنصر الذي يحتوي عليها. وينطبق ذلك على العناصر التي تشكل جزءًا من سطر من النص أو يتم عرضها ككتلة مضمنة أو خلية جدول.
تُستخدم خاصية 'المحاذاة العمودية' بشكل شائع للعناصر المضمنة مثل الصور أو النص أو عناصر الكتلة المضمنة داخل سطر من النص. ولا ينطبق مباشرة على عناصر مستوى الكتلة؛ ومع ذلك، يمكنك استخدام تقنيات مثل flexbox أو تحديد المواقع لمحاذاتها عموديًا.
بناء الجملة:
إليك الصيغة الأساسية لخاصية المحاذاة العمودية:
selector { vertical-align: value; }
يمكن أن تكون 'القيمة' أحد الخيارات التالية:
ملاحظة: تذكر أن 'المحاذاة العمودية' لها سلوكها المحدد اعتمادًا على نوع العنصر والسياق الذي يتم استخدامه فيه، لذلك قد لا تكون تأثيراتها واضحة دائمًا. إنه مفيد بشكل خاص لمحاذاة العناصر المضمنة مع النص أو العناصر المضمنة الأخرى.
أمثلة
فيما يلي بعض التفاصيل والأمثلة الإضافية المتعلقة بخاصية 'المحاذاة العمودية' في CSS:
1. محاذاة خط الأساس:
نمط تصميم طريقة المصنع
حدود نص آخر
2. منخفض ومرتفع:
ح2او هو الماء. س2+ و2= ص2
3. المحاذاة العلوية والسفلية:
محاذاة لأعلى محاذاة للأسفل
4. المحاذاة الوسطى:
يتم توسيط هذا الرمز عموديًا
5. محاذاة النص العلوي والسفلي:
تمت محاذاة النص إلى أعلى محاذاة النص إلى الأسفل
6. محاذاة النسبة المئوية:
يتيح لك استخدام قيمة النسبة المئوية مع المحاذاة العمودية محاذاة العنصر رأسيًا عند نسبة ارتفاع سطر محددة. على سبيل المثال، محاذاة عمودية: 50% ستؤدي إلى توسيط العنصر عند نصف ارتفاع الخط.
توسيط عموديا
7. التمركز العمودي لعناصر مستوى الكتلة:
لتوسيط عنصر على مستوى الكتلة عموديًا داخل العنصر الأصلي، يمكنك استخدام تخطيط flexbox أو الشبكة.
Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ }
8. التمركز العمودي مع ارتفاع عنصر غير معروف:
إذا كنت لا تعرف ارتفاع العنصر الذي تريد توسيطه عموديًا، فيمكنك استخدام مزيج من الموضع والتحويل:
html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
9. التوسيط العمودي بنص متعدد الأسطر:
لتوسيط النص متعدد الأسطر عموديًا داخل الحاوية، يمكنك استخدام مزيج من flexbox وعنصر زائف:
html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
10. التوسيط العمودي للصور في حاوية ذات نسب أبعاد مختلفة:
إذا كانت لديك صور ذات نسب عرض إلى ارتفاع مختلفة وتريد توسيطها داخل حاوية، فيمكنك استخدام مزيج من flexbox وobject-fit:
لغة البرمجة:
<img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">
CSS:
.parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; }
11. الجمع بين المحاذاة الرأسية وارتفاع الخط:
يمكنك دمج خاصية المحاذاة العمودية مع خاصية ارتفاع الخط لتحقيق محاذاة رأسية أكثر دقة، خاصة مع أحجام الخطوط الكبيرة.
.element { font-size: 24px; line-height: 1.5; vertical-align: middle; }
12. استخدام خاصية العرض للمحاذاة:
بينما تعمل المحاذاة الرأسية بشكل أساسي مع عناصر المستوى المضمّن، يمكنك تغيير خاصية العرض لتحقيق المحاذاة الرأسية لعناصر مستوى الكتلة ضمن سياقات محددة.
.container { display: table-cell; vertical-align: middle; }
13. المحاذاة العمودية في الجداول:
غالبًا ما يتم استخدام خاصية المحاذاة العمودية في خلايا الجدول (
مليون بالأرقام
td { vertical-align: middle; }
14. محاذاة العناصر المضمنة:
يمكنك استخدام المحاذاة الرأسية لمحاذاة عناصر الكتلة المضمنة داخل سطر من النص، على سبيل المثال، الرموز بجانب النص.
<span>⭐</span> Star Rating .icon { vertical-align: middle; font-size: 24px; }
هذه مجرد أمثلة قليلة للتعامل مع المحاذاة الرأسية في سيناريوهات مختلفة. اعتمادًا على تخطيطك ومتطلباتك المحددة، قد تحتاج إلى تكييف هذه التقنيات أو دمجها لتحقيق النتائج المرجوة. يوفر CSS أدوات متنوعة للتعامل مع المحاذاة الرأسية بفعالية في سياقات مختلفة.
تذكر أنه على الرغم من أن خاصية المحاذاة العمودية لها استخدامات، إلا أنه توجد حلول أكثر شمولاً لجميع سيناريوهات المحاذاة، وخاصة العناصر على مستوى الكتلة. بالنسبة للتخطيطات ومتطلبات المحاذاة الأكثر تعقيدًا، يوصى باستكشاف تقنيات تخطيط CSS الحديثة مثل Flexbox أو CSS Grid أو حتى قيم موضع CSS (مثل المطلقة والنسبية) لتحقيق النتائج المرجوة بشكل أكثر فعالية ويمكن التنبؤ بها.
تذكر أن 'المحاذاة العمودية' تؤثر فقط على العناصر ذات المستوى المضمّن أو خلايا الجدول. استخدم تقنيات مثل flexbox أو تخطيط الشبكة أو تحديد الموضع لمحاذاة عناصر مستوى الكتلة عموديًا.
المزيد من الأمثلة
table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3>اختبره الآن
انتاج |
الآن، هناك مثال آخر نقوم فيه بمحاذاة النص مع الصورة.
مثال
div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment.اختبره الآن
انتاج |
مزايا المحاذاة العمودية في CSS
عيوب المحاذاة العمودية في CSS
بشكل عام، في حين أن خاصية المحاذاة العمودية مفيدة لمحاذاة العناصر المضمنة أو خلايا الجدول داخل سطر من النص، غالبًا ما يحتاج المطورون إلى تقنيات CSS أخرى لمتطلبات تخطيط وتحديد موضع أكثر تقدمًا، خاصة عند التعامل مع عناصر مستوى الكتلة أو التخطيطات المعقدة. يعد CSS Flexbox وCSS Grid من البدائل القوية للمحاذاة الأوسع والتحكم في تحديد المواقع.
خاتمة
تعد خاصية المحاذاة العمودية مفيدة لمحاذاة العناصر المضمنة داخل النص أو خلايا الجدول. ومع ذلك، فإن لها قيودًا ويمكن أن يكون من الصعب استخدامها بشكل فعال للتخطيطات المعقدة أو العناصر على مستوى الكتلة. يجب على المطورين النظر في تقنيات تخطيط CSS الحديثة التي توفر المزيد من التحكم والمرونة في المحاذاة وتحديد الموضع.