معايير التوازي (CSS Alignment) في CSS: دليلك الشامل

مقدمة:
في هذا المقال، سنقوم بمناقشة معايير التوازي في CSS، بما في ذلك خصائص text-align، vertical-align، margin، float، وposition. سنغطي كيفية استخدامها وكيف يمكن أن تساعدك في تحسين تصميم واجهة المستخدم الخاصة بك. سواء كنت مبتدئًا أو لديك بعض الخبرة في التصميم، هذا المقال سيكون مرجعًا مفيدًا لك.

خاصية CSS text-align

خاصية CSS text-align مع القيمة left

“تستخدم خاصية text-align بقيمة ‘left’ لمحاذاة النص إلى اليسار. هذا هو الوضع الافتراضي للغات التي تكتب من اليسار إلى اليمين مثل الإنجليزية والفرنسية والعربية. ها هو كود CSS لذلك:

p {
    text-align: left;
}

في هذا الكود، سيتم محاذاة جميع الفقرات (p) إلى اليسار.

خاصية CSS text-align مع القيمة right

“القيمة ‘right’ لخاصية text-align تعمل على محاذاة النص إلى اليمين. هذا غالبًا ما يستخدم في اللغات التي تكتب من اليمين إلى اليسار مثل العبرية. إليك كود CSS لذلك:

p {
    text-align: right;
}

في هذا الكود، ستتم محاذاة جميع الفقرات (p) إلى اليمين.

خاصية CSS text-align مع القيمة center

“القيمة ‘center’ لخاصية text-align تمحاذاة النص في الوسط. هذا يمكن أن يكون مفيداً في تصميمات الواجهة وخاصة في العناوين. ها هو كود CSS لذلك:

h1 {
    text-align: center;
}

في هذا الكود، سيتم محاذاة جميع العناوين من الدرجة الأولى (h1) في الوسط.

خاصية CSS text-align مع القيمة justify

“القيمة ‘justify’ لخاصية text-align توزع النص على طول السطر بحيث يصبح الهامش في كلا الجانبين مستقيم. هذا يعطي مظهرًا أكثر احترافية وقد يستخدم في الفقرات الطويلة. ها هو كود CSS لذلك:

p {
    text-align: justify;
}

في هذا الكود، ستتم محاذاة جميع الفقرات (p) بالتوزيع على طول السطر.

خاصية CSS vertical-align

خاصية CSS vertical-align مع القيمة baseline

تستخدم القيمة ‘baseline’ مع خاصية vertical-align لمحاذاة النص أو الصورة مع الخط الأساسي للعنصر الأعلى مستوى. هذا هو الوضع الافتراضي وغالبًا ما يستخدم في محاذاة النصوص. اليك كود CSS لذلك:

img {
    vertical-align: baseline;
}

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

خاصية CSS vertical-align مع القيمة top

القيمة ‘top’ مع خاصية vertical-align تمحاذاة النص أو الصورة مع الجزء العلوي للعنصر الأعلى مستوى. هذا يمكن أن يكون مفيدًا عندما تريد أن يكون النص أو الصورة في الجزء العلوي للعنصر المحيط. إليك كود CSS لذلك:

img {
    vertical-align: top;
}

في هذا الكود، ستتم محاذاة جميع الصور (img) مع الجزء العلوي للعنصر الأعلى مستوى.

خاصية CSS vertical-align مع القيمة middle

القيمة ‘middle’ مع خاصية vertical-align تمحاذاة النص أو الصورة في الوسط العمودي للعنصر الأعلى مستوى. هذا يمكن أن يكون مفيدًا عندما تريد توسيط النص أو الصورة عموديًا. إليك كود CSS لذلك:

img {
    vertical-align: middle;
}

في هذا الكود، ستتم محاذاة جميع الصور (img) في الوسط العمودي للعنصر الأعلى مستوى.

خاصية CSS vertical-align مع القيمة bottom

القيمة ‘bottom’ مع خاصية vertical-align تمحاذاة النص أو الصورة مع الجزء السفلي للعنصر الأعلى مستوى. هذا يمكن أن يكون مفيدًا عندما تريد أن يكون النص أو الصورة في الجزء السفلي للعنصر المحيط. اليك كود CSS لذلك:

img {
    vertical-align: bottom;
}

في هذا الكود، ستتم محاذاة جميع الصور (img) مع الجزء السفلي للعنصر الأعلى مستوى.”

خاصية CSS margin

خاصية CSS margin مع القيمة auto

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

div {
    margin: auto;
    width: 50%;
}

في هذا الكود، يتم توسيط العناصر div أفقياً داخل عنصرها الأم.

خاصية CSS margin لتوسيط عنصر

الهامش (margin) يمكن أن يستخدم أيضًا لتوسيط عنصر أفقيًا داخل عنصره الأم، ولكن يجب تحديد العرض أيضًا. إليك كود CSS لذلك:

div {
    margin: 0 auto;
    width: 50%;
}

في هذا الكود، يتم توسيط العناصر div أفقياً داخل عنصرها الأم ويتم تحديد العرض بنسبة 50% من عرض العنصر الأم.”

خاصية CSS float و CSS position

خاصية CSS float

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

img {
    float: right;
}

في هذا الكود، سينتقل جميع العناصر img إلى اليمين.

خاصية CSS position مع القيمة absolute

القيمة ‘absolute’ مع خاصية position تجعل العنصر موقعًا مطلقًا. هذا يعني أن العنصر سيتم تحريكه بالكامل من التدفق الطبيعي للصفحة ويمكن وضعه في أي مكان داخل عنصره الأم الذي له position غير static. ها هو كود CSS يشرح ذلك:

div {
    position: absolute;
    top: 50px;
    left: 50px;
}

في هذا الكود، سيتم تحريك العناصر div 50 بكسل عن اليسار و50 بكسل عن الأعلى من العنصر الأم.”

خاصية CSS vertical-align و خاصية CSS float

خاصية CSS vertical-align مع القيمة middle

القيمة ‘middle’ مع خاصية vertical-align تجعل العنصر في الوسط عمودياً مقارنةً بالسطر الحالي. هذه القيمة غالبًا ما تستخدم مع الصور والعناصر الداخلية. ها هو كود CSS يشرح ذلك:

img {
    vertical-align: middle;
}

في هذا الكود، ستكون جميع الصور متوازنة عمودياً مع العناصر المجاورة في السطر.

خاصية CSS float

كما تمت مناقشتها سابقًا، خاصية float تُستخدم لجعل العناصر، مثل الصور أو الفقرات، تنساب حول العنصر الآخر. من الممكن أيضًا استخدام القيمة ‘none’ لإلغاء تطبيق خاصية float على عنصر ما. ها هو كود CSS يشرح ذلك:

div {
    float: none;
}

في هذا الكود، سيتم إلغاء تأثير خاصية float على العناصر div.”

خاصية CSS text-align

خاصية CSS text-align مع القيمة justify

القيمة ‘justify’ مع خاصية text-align توزع النص بشكل متساوٍ على طول خط النص، حيث يبدأ من اليسار وينتهي عند اليمين. تستخدم هذه القيمة بشكل مشترك في النصوص الطويلة مثل الفقرات لإعطاء مظهر مرتب ومتناسق. ها هو كود CSS يشرح ذلك:

p {
    text-align: justify;
}

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

الختام

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

الأسئلة المتكررة

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