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

تُستخدم خاصية 'المحاذاة العمودية' بشكل شائع للعناصر المضمنة مثل الصور أو النص أو عناصر الكتلة المضمنة داخل سطر من النص. ولا ينطبق مباشرة على عناصر مستوى الكتلة؛ ومع ذلك، يمكنك استخدام تقنيات مثل flexbox أو تحديد المواقع لمحاذاتها عموديًا.

بناء الجملة:

إليك الصيغة الأساسية لخاصية المحاذاة العمودية:

 selector { vertical-align: value; } 

يمكن أن تكون 'القيمة' أحد الخيارات التالية:

حدود:يقوم بمحاذاة الخط الأساسي للعنصر مع الخط الأساسي للعنصر الأصلي الخاص به. هذه هي القيمة الافتراضية لمعظم العناصر.الفرعية:يقوم بمحاذاة الخط الأساسي للعنصر مع الخط الأساسي المنخفض لخط العنصر الأصلي.ممتاز:يقوم بمحاذاة الخط الأساسي للعنصر مع الخط الأساسي المرتفع لخط العنصر الأصلي.قمة:قم بمحاذاة الجزء العلوي من العنصر مع الجزء العلوي من العنصر الأطول على السطر داخل مربع الخط.أعلى النص:يقوم بمحاذاة الجزء العلوي من العنصر مع الجزء العلوي من خط العنصر الأصلي.وسط:يقوم بتوسيط العنصر عموديًا بالنسبة للعنصر الأصلي.قاع:قم بمحاذاة الجزء السفلي من العنصر مع الجزء السفلي من العنصر الأدنى على السطر داخل مربع الخط.أسفل النص:قم بمحاذاة الجزء السفلي من العنصر مع الجزء السفلي من خط العنصر الأصلي.نسبة مئوية:تتم محاذاة العنصر عموديًا بنسبة مئوية محددة من ارتفاع الخط. على سبيل المثال، ستؤدي عملية المحاذاة العمودية: 50% إلى توسيط العنصر عموديًا داخل العنصر الأصلي الخاص به.

ملاحظة: تذكر أن 'المحاذاة العمودية' لها سلوكها المحدد اعتمادًا على نوع العنصر والسياق الذي يتم استخدامه فيه، لذلك قد لا تكون تأثيراتها واضحة دائمًا. إنه مفيد بشكل خاص لمحاذاة العناصر المضمنة مع النص أو العناصر المضمنة الأخرى.

أمثلة

فيما يلي بعض التفاصيل والأمثلة الإضافية المتعلقة بخاصية 'المحاذاة العمودية' في CSS:

1. محاذاة خط الأساس:

نمط تصميم طريقة المصنع

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

حدود نص آخر

2. منخفض ومرتفع:

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

ح₂او هو الماء. س²+ و²= ص²

3. المحاذاة العلوية والسفلية:

المحاذاة العمودية:تعمل القيمة العليا على محاذاة الجزء العلوي من العنصر مع الجزء العلوي من العنصر الأطول على السطر داخل مربع الخط. بصورة مماثلة،محاذاة عمودية:يقوم الجزء السفلي بمحاذاة الجزء السفلي من العنصر مع الجزء السفلي من العنصر الأدنى على السطر داخل مربع الخط.

محاذاة لأعلى محاذاة للأسفل

4. المحاذاة الوسطى:

المحاذاة العمودية:تعمل القيمة الوسطى على توسيط العنصر عموديًا بالنسبة للعنصر الأصلي. يُستخدم هذا غالبًا لتوسيط الرموز أو الصور داخل النص.

يتم توسيط هذا الرمز عموديًا

5. محاذاة النص العلوي والسفلي:

المحاذاة العمودية:تعمل قيمة Text-top على محاذاة الجزء العلوي من العنصر مع الجزء العلوي من خط العنصر الأصلي ومحاذاة عمودية:يقوم النص السفلي بمحاذاة الجزء السفلي من العنصر مع الجزء السفلي من خط العنصر الأصلي.

تمت محاذاة النص إلى أعلى محاذاة النص إلى الأسفل

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: &apos;&apos;; 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>&#x2B50;</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:في رسائل البريد الإلكتروني بتنسيق HTML، حيث تحتاج التخطيطات المعقدة إلى دعم أفضل، يمكن أن يكون استخدام المحاذاة الرأسية مفيدًا للمحاذاة الرأسية الأساسية للعناصر دون الاعتماد على أوراق أنماط خارجية أو تقنيات معقدة.متوافق مع العرض:inline-block: خاصية المحاذاة العمودية متوافقة مع عناصر الكتلة المضمنة، مما يسمح بمحاذاة رأسية سهلة لهذه العناصر داخل السطر.الحفاظ على الاتساق:بالنسبة للعناصر التي تعد جزءًا من بيانات جدولية أو تحتاج إلى محاذاتها مع عناصر مشابهة عبر صفوف أو أعمدة مختلفة، يمكن أن تساعد المحاذاة الرأسية في الحفاظ على الاتساق المرئي.التوافق المتصفح:على عكس بعض تقنيات CSS الأحدث، كانت المحاذاة الرأسية جزءًا من CSS لفترة طويلة وتتمتع بتوافق جيد عبر المتصفحات.

عيوب المحاذاة العمودية في CSS

يقتصر على العناصر المضمنة:أهم قيود خاصية المحاذاة العمودية هي أنها تعمل فقط مع عناصر المستوى المضمّن أو خلايا الجدول. لا ينطبق مباشرة على عناصر مستوى الكتلة. وهذا يمكن أن يجعل المحاذاة العمودية أكثر صعوبة بالنسبة للعناصر الأكبر أو التخطيطات المعقدة.سلوك غير متناسق:يمكن أن تكون المحاذاة العمودية صعبة وغير متناسقة، خاصة مع اختلاف أحجام الخطوط وارتفاعات الخطوط والعناصر المتداخلة. قد تؤدي نفس قيمة المحاذاة العمودية إلى نتائج مختلفة بناءً على السياق.مميزات المتصفح:قد تحتوي بعض المتصفحات القديمة على تفسيرات أو مخالفات غير متسقة مع خاصية المحاذاة الرأسية، مما قد يؤدي إلى نتائج غير متوقعة. ومع ذلك، فقد تحسنت هذه المشكلة مع تقدم المتصفحات الحديثة.التحكم المحدود في التباعد:تتعامل خاصية المحاذاة العمودية في المقام الأول مع محاذاة العناصر عموديًا، ولكنها توفر فقط القليل من التحكم في التباعد بين العناصر. غالبًا ما يتطلب ضبط التباعد تعديلات إضافية على CSS أو HTML.Flexbox وGrid كبدائل:بالنسبة لمتطلبات التخطيط الأكثر تعقيدًا والمحاذاة الرأسية للعناصر على مستوى الكتلة، غالبًا ما يعتمد المطورون على Flexbox أو CSS Grid، والتي توفر حلولاً أكثر قوة ويمكن التنبؤ بها.غير مناسب للتمركز الكامل:على الرغم من أن المحاذاة الرأسية مفيدة لمحاذاة العناصر المضمنة رأسيًا، إلا أنها مناسبة للعناصر على مستوى الكتلة ذات التوسيط الكامل (أفقيًا وعموديًا) مع تقنيات CSS الإضافية.اسم مضلل:يمكن أن يكون اسم 'المحاذاة العمودية' مضللاً لأنه لا يقوم بمحاذاة العنصر عموديًا بالطريقة التي يتوقعها المطورون غالبًا. وبدلاً من ذلك، فإنه يتحكم في محاذاة محتوى العنصر داخل مربع الخط الخاص به.التعقيد مع الخطوط المختلفة:يمكن أن يكون سلوك المحاذاة العمودية غير متوقع عند التعامل مع عناصر ذات أحجام خطوط وارتفاعات مختلفة. وهذا يمكن أن يجعل المحاذاة العمودية المتسقة صعبة.يقتصر على التخطيطات المعقدة:إنه غير مناسب للتخطيطات أو السيناريوهات المعقدة حيث يجب عليك محاذاة العناصر الأكبر على مستوى الكتلة عموديًا داخل الحاوية الأصلية.التوافق عبر المتصفحات:في حين أن المتصفحات الحديثة قامت بتحسين دعم المحاذاة العمودية، إلا أن المتصفحات القديمة قد لا تزال تظهر تناقضات أو سلوكًا غير متوقع.التقنيات البديلة:توفر تقنيات تخطيط CSS الحديثة مثل Flexbox وCSS Grid طرقًا أكثر قوة ويمكن التنبؤ بها للتعامل مع متطلبات التخطيط المعقدة، بما في ذلك المحاذاة الرأسية لكل من العناصر المضمنة وعناصر مستوى الكتلة.اعتبارات إمكانية الوصول:قد لا يكون استخدام المحاذاة الرأسية للتخطيط هو الأسلوب الأكثر سهولة للوصول، لأنه قد يتداخل مع برامج قراءة الشاشة والتقنيات المساعدة الأخرى. غالبًا ما تكون تقنيات HTML الدلالية وتقنيات CSS المناسبة خيارات أفضل لإمكانية الوصول.تحديات التصحيح:قد يكون تصحيح السلوك غير المتوقع أو مشكلات المحاذاة المتعلقة بالمحاذاة الرأسية أمرًا صعبًا في بعض الأحيان، خاصة عند التعامل مع العناصر المتداخلة وأحجام الخطوط المختلفة.تطور تخطيط الويب:مع تطور مشهد تطوير الويب، توفر تقنيات التخطيط الجديدة مثل CSS Grid Layout وFlexbox حلولاً أكثر حداثة وشمولاً لتحديات التخطيط، مما قد يجعل المحاذاة العمودية أقل أهمية بالنسبة للعديد من السيناريوهات.

بشكل عام، في حين أن خاصية المحاذاة العمودية مفيدة لمحاذاة العناصر المضمنة أو خلايا الجدول داخل سطر من النص، غالبًا ما يحتاج المطورون إلى تقنيات CSS أخرى لمتطلبات تخطيط وتحديد موضع أكثر تقدمًا، خاصة عند التعامل مع عناصر مستوى الكتلة أو التخطيطات المعقدة. يعد CSS Flexbox وCSS Grid من البدائل القوية للمحاذاة الأوسع والتحكم في تحديد المواقع.

خاتمة

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