نصائح مفيدة

ثلاث طرق لتوسيط صورة HTML

Pin
Send
Share
Send
Send


يعد استخدام CSS هو الطريقة المثلى لتوسيط الصور وكتل النص وحتى تصميم صفحة الويب بالكامل. معظم خصائص محاذاة HTML كانت متاحة في CSS منذ الإصدار 1.0. تعمل بشكل رائع مع CSS3 ومتصفحات الويب الحديثة:

تطبيقات CSS التي تركز على HTML

يمكن أن يكون توسيط CSS مشكلة لمصممي الويب المبتدئين. هناك العديد من الطرق للقيام بذلك ، ولكن لا تنطبق جميعها على كل عنصر.

يمكن استخدام CSS من أجل:

  • توسيط النص
  • توسيط عنصر الكتلة (مثل div)
  • صورة المركز
  • توسيط الكتلة أو الصورة رأسياً.

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

توسيط نص CSS

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

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

تطبيقات هذه الفئة:

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

توسيط كتل المحتوى باستخدام CSS

الكتل هي أي عناصر في الصفحة يتم تعيينها كعناصر لمستوى الكتل ولها عرض معين. في كثير من الأحيان يتم إنشاء هذه الكتل باستخدام

الطريقة الأكثر شيوعًا لكتل ​​الوسط هي تعيين الحشوة اليسرى واليمنى على تلقائي:

سيقوم هذا النموذج المختزل لخاصية الهامش بتعيين الهوامش العلوية والسفلية على 0 ، وسيستخدم الهوامش اليمنى واليسرى تلقائي. وبالتالي ، يتم شغل كل المساحة المتاحة وتقسيمها بالتساوي بين الجانبين ، وهو ما يعادل محاذاة HTML div.

تطبيق HTML:

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

CSS توسيط الصور

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

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

إليك رمز HTML للصورة التي سيتم توسيطها:

يمكنك أيضًا توسيط الكائنات باستخدام CSS المضمن:

عناصر مركز عموديا مع CSS

لطالما كانت المحاذاة الرأسية لـ HTML مشكلة في تصميم الويب ، ولكن مع إصدار مواصفات CSS Flexible Box Layout Module في CSS3 ، ظهر حل لهذه المهمة.

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

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

  • ضع العناصر المراد توسيطها داخل عنصر الحاوية مثل div ،
  • تعيين الحد الأدنى لارتفاع عنصر الحاوية ،
  • أعلن عنصر الحاوية ،
  • تعيين HTML العمودي محاذاة إلى منتصف.

توسيط عمودي والإصدارات السابقة من Internet Explorer

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

هذا المنشور عبارة عن ترجمة لمقال "استخدام CSS لتوسيط الصور وكائنات HTML الأخرى" أعده الفريق الودود لمشروع Internet Technology.ru

شاهد الفيديو: How to Center an Image Horizontally CSS & HTML Tutorial (كانون الثاني 2022).

Pin
Send
Share
Send
Send