ماذا تعرف
- لتوسيط النص ، استخدم الكود التالي (تشير "[/]" إلى فاصل أسطر): .center {[/] text-align: center؛ [/] }.
- كتل مركزية للمحتوى بالشفرة التالية (تشير "[/]" إلى فاصل أسطر): .center {[/] margin: auto؛ [/] العرض: 80em ؛ [/] }.
- لتوسيط الصورة (تشير "[/]" إلى فاصل أسطر): img.center {[/] display: block؛ [/] الهامش الأيسر: تلقائي ؛ [/] margin-right: auto؛ [/] }.
CSS هي أفضل طريقة لتوسيط العناصر ، ولكن يمكن أن يمثل تحديًا لمصممي الويب المبتدئين نظرًا لوجود العديد من الطرق لتحقيق ذلك. تشرح هذه المقالة كيفية استخدام CSS لتوسيط النص وكتل النص والصور.
توسيط النص باستخدام CSS
تحتاج إلى معرفة خاصية نمط واحدة فقط لتوسيط النص على الصفحة:
.المركز {
محاذاة النص: مركز ؛
}
باستخدام هذا السطر من CSS ، سيتم توسيط كل فقرة مكتوبة بفئة .center أفقيًا داخل العنصر الأصلي. على سبيل المثال ، فقرة داخل قسم (تابع لهذا التقسيم) سيتم توسيطها أفقيًا داخل.
فيما يلي مثال على هذه الفئة المطبقة في مستند HTML:
تم توسيط هذا النص.
عند توسيط النص بخاصية محاذاة النص ، تذكر أنه سيتم توسيطه داخل العنصر الذي يحتوي عليه وليس بالضرورة توسيطه داخل الصفحة الكاملة نفسها.
تعد سهولة القراءة دائمًا أمرًا أساسيًا عندما يتعلق الأمر بنص موقع الويب. كبير كتل من نص مضبوط من الوسط قد يكون من الصعب قراءتها ، لذا استخدم هذا الأسلوب باعتدال. يسهل عادةً قراءة العناوين الرئيسية والكتل الصغيرة من النص ، مثل النص التشويقي لمقالة ، عند توسيطها ؛ ومع ذلك ، فإن الكتل الكبيرة من النص ، مثل المقالة الكاملة ، سيكون من الصعب استهلاكها إذا كانت مبررة بشكل كامل.
توسيط كتل المحتوى باستخدام CSS
يتم إنشاء كتل المحتوى باستخدام HTML.
.المركز {
الهامش: تلقائي ؛
العرض: 80em ؛
}
سيعمل اختصار CSS لخاصية الهامش على ضبط الهوامش العلوية والسفلية على قيمة 0 ، بينما يستخدم اليسار واليمين "تلقائي". هذا يشغل أي مساحة متوفرة بشكل أساسي ويقسمها بالتساوي بين جانبي نافذة منفذ العرض ، مما يؤدي إلى توسيط العنصر بشكل فعال على الصفحة.
هنا يتم تطبيقه في HTML:
يتم توسيط هذه الكتلة بأكملها ،لكن النص الموجود بداخله يتم محاذاته إلى اليسار.
طالما أن الكتلة الخاصة بك لها عرض محدد ، فإنها ستتمركز داخل العنصر المحتوي. لن يتم توسيط النص الموجود في تلك الكتلة داخله ولكن سيتم تبريره إلى اليسار. هذا لأن النص مضبوط على اليسار باعتباره الإعداد الافتراضي في متصفحات الويب. إذا كنت تريد توسيط النص أيضًا ، فيمكنك استخدام خاصية محاذاة النص التي تمت تغطيتها مسبقًا مع هذه الطريقة لتوسيط القسمة.
توسيط الصور باستخدام CSS
على الرغم من أن معظم المتصفحات ستعرض الصور في المنتصف باستخدام نفس خاصية محاذاة النص ، إلا أنه لا ينصح بها من قبل W3C. لذلك ، هناك دائمًا احتمال أن تختار الإصدارات المستقبلية من المتصفحات تجاهل هذه الطريقة.
بدلاً من استخدام محاذاة النص لتوسيط الصورة ، يجب أن تخبر المتصفح صراحةً أن الصورة عنصر على مستوى الكتلة. بهذه الطريقة ، يمكنك توسيطها كما تفعل مع أي كتلة أخرى. إليك CSS لتحقيق ذلك:
img.center {
العرض محجوب؛
الهامش الأيسر: تلقائي ؛
الهامش الأيمن: تلقائي ؛
}
وإليك HTML للصورة المراد توسيطها:
يمكنك أيضًا توسيط الكائنات باستخدام CSS المضمنة (انظر أدناه) ، ولكن هذا الأسلوب غير مستحسن لأنه يضيف أنماطًا مرئية إلى ترميز HTML الخاص بك. تذكر أن الأسلوب والهيكل يجب أن يكونا منفصلين ؛ ستؤدي إضافة أنماط CSS إلى HTML إلى كسر هذا الفصل ، وعلى هذا النحو ، يجب عليك تجنبه كلما أمكن ذلك.
توسيط العناصر عموديًا باستخدام CSS
لطالما كان توسيط الكائنات عموديًا يمثل تحديًا في تصميم الويب ، ولكن إصدار ملف وحدة تخطيط الصندوق المرن CSS في CSS3 طريقة للقيام بذلك.
تعمل المحاذاة الرأسية بشكل مشابه للمحاذاة الأفقية المذكورة أعلاه. خاصية CSS محاذاة رأسية ، مثل:
.vcenter {
محاذاة عمودية: وسط ؛
}
جميع المتصفحات الحديثة دعم أسلوب CSS هذا. إذا كانت لديك مشكلات مع المتصفحات القديمة ، فإن W3C توصي بتوسيط النص عموديًا في الحاوية. للقيام بذلك ، ضع العناصر داخل عنصر محتوي ، مثل a شعبة، ووضع حد أدنى للارتفاع عليه. قم بتعريف العنصر المحتوي على أنه خلية جدول ، وقم بتعيين المحاذاة العمودية على "الوسط".
على سبيل المثال ، هنا CSS:
.vcenter {
الحد الأدنى للارتفاع: 12 م ؛
عرض: خلية الجدول.
محاذاة عمودية: وسط ؛
}
وهنا HTML:
يتم توسيط هذا النص رأسياً في المربع.
لا تستخدم عنصر HTML لتوسيط الصور والنصوص ؛ تم إهماله ، ولم تعد متصفحات الويب الحديثة تدعمه. هذا ، في جزء كبير منه ، هو استجابة لفصل HTML5 الواضح بين البنية والأسلوب: ينشئ HTML بنية ، وتملي CSS الأسلوب. نظرًا لأن التوسيط هو خاصية مرئية للعنصر (كيف يبدو وليس ما هو عليه) ، يتم التعامل مع هذا النمط باستخدام CSS ، وليس HTML. استخدم CSS بدلاً من ذلك حتى يتم عرض صفحاتك بشكل صحيح وتتوافق مع المعايير الحديثة.
توسيط عمودي وإصدارات أقدم من Internet Explorer
يمكنك إجبار Internet Explorer (IE) على التوسيط ثم استخدام التعليقات الشرطية حتى يتمكن IE فقط من رؤية الأنماط ، لكنها مطولة وغير جذابة بعض الشيء. قرار Microsoft 2015 بإسقاط الدعم لـ الإصدارات القديمة من IE، ومع ذلك ، ستجعل هذه المشكلة غير مشكلة نظرًا لأن IE يخرج من الاستخدام.