يمكن لموقع الويب سريع الاستجابة تعديل حجم الشاشة وأبعاد الجهاز الذي يتم عرضه عليه. إلى جانب استجابة موقع الويب، من الضروري أيضًا أن تكون الصور والنصوص متوافقة ومستجيبة. الصور المحاذاة هي تلك التي تلتف النص حولها. بينما النص المحاذي هو الذي يبدو وكأنه فقرة كاملة.
ستتناول هذه المقالة طريقة محاذاة الصور والنص بشكل مستجيب.
كيفية محاذاة الصور والنص بشكل مستجيب؟
يمكن محاذاة المحتوى بما في ذلك الصور والنصوص بشكل مستجيب باستخدام Bootstrap. لتقديم العرض التوضيحي، قمنا بإدراج مثالين:
مثال 1: قم بمحاذاة النص عموديًا والصورة أفقيًا
أولاً، حاول توسيط الصورة أفقيًا والنص عموديًا. ولهذا الغرض، اتبع التعليمات الواردة أدناه:
الخطوة 1: إنشاء بنية HTML
أثناء إنشاء بنية HTML، قم أولاً بربط ' بوتستراب 'وكذلك ملف CSS الخارجي. بعد ذلك قم بإنشاء <ديف> حاوية وتشمل صورة باستخدام العلامة والنص:
< جسم >
< شعبة فصل = 'حاوية' >
< img src = 'اختبار-image.jpg' كل شئ = 'صورة الاختبار' >
< فئة div = 'نص' > هذا بعض النص. شعبة >
شعبة >
جسم >
الخطوة 2: تطبيق CSS
على الحاوية:
- الآن، قم بتوسيط المحتوى من خلال تطبيق CSS على ' حاوية ' فصل.
- تعيين ' ثني ”قيمة العقار“ عرض 'لإنشاء صندوق مرن.
- تعيين 'محاذاة العناصر 'ملكية إلى' مركز ' القيمة لتوسيط المحاذاة عموديًا.
- تعيين ' تبرير المحتوى 'قيمة الخاصية إلى 'المركز' لتوسيط المحاذاة أفقيًا.
- وأخيرًا، حدد القيمة ' مركز 'إلى العقار' محاذاة النص ' لتوسيط النص.
على :
- حدد ال ' أقصى عرض 'الملكية للقيمة' مركز ' لضمان تغيير حجم الصورة مع الحاوية الخاصة بها.
- حدد القيمة ' آلي ' إلى ' ارتفاع خاصية 'للحفاظ على نسبة العرض إلى الارتفاع للصورة.
على النص:
- اضبط حجم خط النص على ' 16 بكسل ' عن طريق تحديد القيمة '16px' إلى ' حجم الخط '.
- تحديد عرض النص عن طريق تعيين ' أقصى عرض 'الملكية بقيمة' 390px ':
عرض: ثني ;
محاذاة النص: مركز؛
ضبط المحتوى: مركز؛
محاذاة العناصر: مركز؛
}
img {
أقصى عرض: 100 % ;
الارتفاع: تلقائي؛
}
.نص {
حجم الخط: 16 بكسل؛
الحد الأقصى للعرض: 390 بكسل؛
}
يمكن ملاحظة أن النص متمركز رأسياً، والصورة متمركزة أفقياً:
مثال 2: محاذاة النص والصورة المستجيبة إلى اليسار
في هذا المثال المحدد، سيتم محاذاة الصورة والنص إلى اليسار. ولهذا الغرض، اتبع التعليمات التدريجية التالية:
الخطوة 1: إنشاء بنية HTML
كود HTML هو نفسه المذكور أعلاه، المستخدم في المثال.
الخطوة 2: تطبيق CSS
على الحاوية:
- تعيين ' الاتجاه المرن 'قيمة العقار إلى' عمود ' لتكديس العناصر عموديًا على الشاشات الصغيرة.
- تعيين ' محاذاة العناصر 'قيمة العقار إلى' بداية مرنة ' إلى اليسار لمحاذاة العناصر.
- أخيرًا، قم بتعيين الخاصية ' محاذاة النص ' إلى ' غادر 'خاصية محاذاة النص إلى اليسار.
على :
- نفس المستخدمة في المثال أعلاه.
على النص:
- نفس ما تم استخدامه في المثال أعلاه:
عرض: ثني ;
الاتجاه المرن: العمود؛
محاذاة العناصر: البداية المرنة؛
محاذاة النص: يسار؛
}
img {
أقصى عرض: 100 % ;
الارتفاع: تلقائي؛
}
.نص {
حجم الخط: 16 بكسل؛
الحد الأقصى للعرض: 390 بكسل؛
}
يؤكد الإخراج أن النص والصورة محاذيان لليسار:
خاتمة
لمحاذاة الصور والنص بشكل مستجيب، قم أولاً بإنشاء تخطيط شبكي أو مرن في CSS، ثم قم بتعيين ' محاذاة العنصر 'قيمة العقار إلى' مركز '. سيؤدي القيام بذلك إلى محاذاة الصور والنص بشكل مستجيب في CSS. زودت هذه الكتابة المستخدمين بدليل كامل لمحاذاة الصور والنص بشكل مستجيب.