قم بتوسيط الصور والنصوص وعناصر الحظر عند إنشاء مواقع الويب
إذا كنت تتعلم كيفية إنشاء مواقع ويب ، فإن أحد أكثر الحيل الشائعة التي تحتاج إلى إتقانها هي كيفية توسيط العناصر في نافذة المستعرض. قد يعني هذا توسيط صورة على الصفحة ، أو يمكن أن يبرر النص مثل العناوين الرئيسية كجزء من التصميم.
الطريقة الصحيحة لإنجاز هذا المظهر المرئي للصور أو النص الوسط أو حتى صفحة الويب الخاصة بك هي باستخدام أوراق الأنماط المتتالية (CSS) . معظم خصائص التوسيط كانت في CSS منذ الإصدار 1.0 ، وهي تعمل بشكل رائع مع CSS3 ومتصفحات الويب الحديثة.
مثل العديد من جوانب تصميم الويب ، هناك طرق متعددة لاستخدام CSS لعناصر المركز في صفحة الويب. دعونا نلقي نظرة على بعض الطرق المختلفة لاستخدام CSS لتحقيق هذا المظهر المرئي.
في نظرة عامة على استخدام CSS لعناصر المركز في HTML
يمكن أن يمثل التمركز مع CSS تحديًا لبدء مصممي الويب لأن هناك العديد من الطرق المختلفة لإنجاز هذا النمط المرئي. في حين أن مجموعة متنوعة من الأساليب قد تكون لطيفة أو مطوّرة ويب محنك الذين يعرفون أن ليس كل التقنيات تعمل على كل عنصر ، فإن هذا يمكن أن يكون تحديًا كبيرًا لمحترفي الويب الحديثين لأن مجموعة متنوعة من الأساليب تعني أنهم بحاجة إلى معرفة متى يستخدمون أي منهج. أفضل شيء فعله هو فهم بعض الأساليب. عندما تبدأ في استخدامها ، سوف تتعلم الطريقة التي تعمل بشكل أفضل في أي الحالات.
على مستوى عالٍ ، يمكنك استخدام CSS من أجل:
- نص المركز
- توسيط عنصر مستوى الكتلة (مثل القسمة)
- مركز الصورة
- رأسيًا في وسط كتلة أو صورة
قبل عدة سنوات ، كان بإمكان مصممي الويب استخدام العنصر
توسيط النص مع المغلق
أسهل ما يمكن التركيز عليه في صفحة الويب هو النص. لا توجد سوى خاصية نمط واحد تحتاج إلى معرفتها للقيام بذلك: محاذاة النص. اتبع نمط CSS أدناه ، على سبيل المثال:
p.center {text-align: center؛ }
باستخدام هذا السطر من CSS ، سيتم توسيط كل فقرة مكتوبة بفئة المركز أفقيًا داخل العنصر الأصل. على سبيل المثال ، إذا كانت الفقرة داخل قسم ، بمعنى أنها كانت تابعة لذلك التقسيم ، فسيتم توسيطه أفقيًا داخل
في ما يلي مثال على هذه الفئة مطبقة في مستند HTML:
يتم توسيط هذا النص.
عند توسيط النص مع خاصية محاذاة النص ، تذكر أنه سيتم توسيطه داخل عنصر محتواه وليس بالضرورة توسيطه داخل الصفحة الكاملة نفسها. تذكر أيضًا أنه قد يكون من الصعب قراءة النص المضبوط بالمركز بالنسبة لمجموعات كبيرة من المحتوى ، لذلك استخدم هذا الأسلوب بشكل مقتصد. غالبًا ما يكون من السهل قراءة العناوين والكتل الصغيرة من النص ، مثل النص التشويقي لمقالة أو محتوى آخر ، وضبطها عند توسيطها ، إلا أن كتل النص الكبيرة ، مثل المقال الكامل نفسه ، قد يكون من الصعب استهلاكها إذا كان المحتوى بالكامل مركزًا مبررة. تذكر ، القراءة هي دائما المفتاح عندما يتعلق الأمر بنص الموقع!
توسيط كتل المحتوى مع CSS
تعتبر الكتل أي عناصر في صفحتك لها عرض محدد ويتم إنشاؤها كعنصر مستوى الكتلة. في كثير من الأحيان ، يتم إنشاء هذه الكتل باستخدام عنصر HTML
div.center {
الهامش: 0 تلقائي ؛
العرض: 80
}
سيؤدي اختزال CSS لخاصية الهامش إلى تعيين الهوامش العلوية والسفلية إلى قيمة 0 ، بينما يستخدم اليسار واليمين "تلقائي". يأخذ هذا بشكل أساسي أي مساحة متاحة ويقسمها بالتساوي بين جانبي إطار العرض ، مع التركيز بشكل فعال على العنصر في الصفحة.
هنا يتم تطبيقه في HTML:
ولكن يتم محاذاة النص الموجود داخلها.
طالما أن كتلة الخاص بك عرض محدد ، فإنه سيتم توسيط نفسه داخل عنصر يحتوي على. لن يكون النص الموجود في هذا الجزء متمركزًا فيه ، ولكن سيتم تبريره لليسار. هذا هو becaus نص ما يبرره اليسار في الافتراضي في متصفحات الويب. إذا كنت ترغب في توسيط النص أيضًا ، فيمكنك استخدام خاصية محاذاة النص التي قمنا بتغطيتها في وقت سابق بالاقتران مع هذه الطريقة لتوسيط القسم.
توسيط الصور مع المغلق
بينما تعرض معظم المتصفحات الصور مركزًا باستخدام نفس خاصية محاذاة النص التي نظرنا فيها بالفعل للفقرة ، فليس من الصواب الاعتماد على هذه التقنية حيث لا ينصح بها W3C . نظرًا لعدم التوصية به ، فهناك دائمًا احتمال أن الإصدارات المستقبلية من المتصفحات قد تختار تجاهل هذه الطريقة.
بدلاً من استخدام محاذاة النص لتوسيط صورة ، يجب أن تخبر المتصفح بوضوح أن الصورة هي عنصر مستوى الكتلة. بهذه الطريقة ، يمكنك توسيطها كما تفعل مع أي كتلة أخرى. هنا هو CSS لجعل هذا يحدث:
img.center {
العرض محجوب؛
left-left: auto؛
الهامش الأيمن: auto؛
}
وإليكم HTML الخاص بالصورة التي نرغب في التركيز عليها:
يمكنك أيضًا توسيط الكائنات باستخدام CSS في الخط (انظر أدناه) ، ولكن هذا الأسلوب غير مستحسن لأنه يضيف أنماطًا مرئية إلى ترميز HTML الخاص بك. تذكر أننا نريد فصل النمط والهيكل ، بحيث نضيف أنماط CSS إلى شفرة HTML الخاصة بك مع كسر هذا الفصل ، وبالتالي يجب تجنبه كلما أمكن ذلك.
عناصر توسيط عموديًا باستخدام CSS
لطالما كانت توسيط الكائنات عموديًا تحديًا في تصميم الويب ، ولكن مع إصدار CSS Layout Box Layout Module في CSS3 ، توجد الآن طريقة للقيام بذلك.
المحاذاة العمودية تعمل بالمثل مع المحاذاة الأفقية المغطاة أعلاه. خاصية CSS محاذاة رأسية بالقيمة المتوسطة.
.vcenter {
محاذاة رأسية: وسط؛
}
يتمثل الجانب السلبي لهذا النهج في أن جميع المتصفحات لا تدعم CSS FlexBox ، على الرغم من أن المزيد والمزيد من الطرق الجديدة تتجه إلى طريقة تخطيط CSS! في الواقع ، جميع المتصفحات الحديثة اليوم تدعم الآن نمط CSS هذا. هذا يعني أن مخاوفك الوحيدة مع Flexbox ستكون أقدم بكثير من إصدار المتصفح.
إذا كنت تواجه مشكلات مع المتصفحات القديمة ، فإن W3C توصي بتوسيط النص رأسيًا في حاوية باستخدام الطريقة التالية:
- ضع العناصر المراد توسيطها داخل عنصر محتوي ، مثل div.
- تعيين الحد الأدنى للارتفاع على عنصر يحتوي على.
- قم بتعريف أن عنصر يحتوي على خلية جدول.
- اضبط المحاذاة الرأسية على "وسط".
على سبيل المثال ، إليك CSS:
.vcenter {
الحد الأدنى للارتفاع: 12 صباحًا ؛
عرض: خلية الجدول ؛
محاذاة رأسية: وسط؛
}
وهنا هو HTML:
تتم توسيط هذا النص عموديًا في المربع.
التمركز العمودي والإصدارات القديمة من Internet Explorer
هناك بعض الطرق لفرض Internet Explorer (IE) على المركز ثم استخدام التعليقات الشرطية بحيث يرى IE فقط الأنماط ، ولكنها تكون مطولة قليلاً وقبيحة. والخبر السار هو أنه مع قرار مايكروسوفت الأخير بإسقاط الدعم للإصدارات الأقدم من IE ، فإن هذه المتصفحات غير المدعومة يجب أن تكون في طريقها للخارج قريباً ، مما يسهل على مصممي الويب استخدام أساليب التخطيط الحديثة مثل CSS FlexBox الذي سيجعل كل تصميم CSS ، لا تركز فقط ، أكثر سهولة لجميع مصممي الويب.