المحتوى

• خطوات
• طريقة 1 من 2: CSS (موصى به)
• الطريقة 2 من 2: سمة "المحاذاة" في HTML

يصف محاذاة بطاقة شعار أتش تي أم أل> تم إهماله منذ HTML5. بينما لا تزال هذه السمة تعمل في معظم متصفحات الويب ، يوصى بمحاذاة الصور باستخدام Cascading Style Sheets (CSS). في هذه المقالة ، سوف نوضح لك كيفية توسيط الصور باستخدام CSS والعلامة المهملة. محاذاة.

خطوات

طريقة 1 من 2: CSS (موصى به)

1. 1 أضف كود HTML للصورة. ستستخدم أوراق الأنماط المتتالية (CSS) لمحاذاة الصورة ، لكنك ستحتاج إلى وضعها على الصفحة باستخدام HTML. فيما يلي مثال على استخدام العلامة img> لإدراج صورة في التعليمات البرمجية الخاصة بك:

   img src = "dog.webp" alt = "هذه صورة لكلب">

   • بدلا من dog.webp استبدل اسم ملف الصورة ، وبعد "alt" أدخل وصف الصورة. المعنى المركز لـ "class" لا تتغير ، لأنك ستنشئ فئة CSS بهذا الاسم.
2. 2 ابحث عن كود CSS. إذا كان موقعك يحتوي على ملف CSS منفصل ، فافتحه. إذا لم يكن الأمر كذلك ، فمن المرجح أن يكون CSS أعلى ملف HTML ، داخل العلامات رئيس>... قم بالتمرير إلى أعلى الملف للعثور على العلامات النمط> / النمط>.
   • إذا كانت العلامات النمط> / النمط> لا ، أضفهم. قراءة هذه المقالة للحصول على مزيد من المعلومات.
3. 3 أضف CSS لمحاذاة الصورة. بدلاً من "50٪" ، يمكنك إدخال قيمة مختلفة لجعل الصورة تظهر على الصفحة. لن تتمكن من توسيط الصورة بقيمة "100٪" ، لذلك يجب أن يكون هذا الرقم مختلفًا.

   .center {display: block؛ الهامش الأيسر: تلقائي ؛ الهامش الأيمن: تلقائي ؛ العرض: 50٪؛ }

4. 4 احفظ التغييرات. احفظ ملف HTML وملف CSS (إن وجد). سيؤدي هذا إلى توسيط الصورة.
   • أيضا داخل العلامات img> يمكن إضافة لتوسيط الصور الأخرى.

الطريقة 2 من 2: سمة "المحاذاة" في HTML

1. 1 قم بإنشاء فقرة جديدة. على الرغم من أن طريقة توسيط الصور هذه قد تم إهمالها ، إلا أنها لا تزال تعمل في العديد من المتصفحات. ومع ذلك ، نوصي باستخدام CSS للحفاظ على عمل الموقع عندما تتوقف المتصفحات عن دعم السمة المحددة. تذكر أن السمة محاذاة ستركز الصورة فقط داخل العنصر الذي يحيط بها (على سبيل المثال ، العلامات الداخلية p> / p> أو div> / div>). كمثال ، في ملف HTML ، سننشئ فقرة جديدة بإضافة ص> على سطر منفصل.
2. 2 أضف كود HTML للصورة. أدخل الرمز التالي بعد العلامة ص>... استخدم هذا المثال كدليل:

   p> img src = "dog.webp" alt = "picture" align = "middle">

   • بدلا من dog.webp استبدل اسم ملف الصورة ، وبعد "alt" أدخل وصف الصورة.
   • تخبر السمة الوسطى المتصفح بعرض الصورة في وسط الصفحة.
3. 3 أغلق علامة الفقرة. للقيام بذلك ، أضف / ص> بعد علامة الصورة. يجب أن يبدو الكود النهائي كما يلي:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

4. 4 احفظ التغييرات. سيؤدي هذا إلى توسيط الصورة.