يعد توسيط النص أحد المهام المهمة عند إنشاء صفحات الويب. كيف يمكنني وضع النص في وسط الشاشة وفي نفس الوقت يبدو ممتعا من الناحية الجمالية? في هذه المقالة ، سنلقي نظرة على بعض من أفضل الطرق والأدوات لمساعدتك في تحقيق النتيجة المرجوة.
الطريقة الأولى هي استخدام خاصية كس محاذاة النص. يسمح لك بتعيين المحاذاة الأفقية للمحتويات داخل عنصر الكتلة. لكي يكون النص في المنتصف ، تحتاج إلى إضافة الكود التالي إلى ملف كس:
محدد {
محاذاة النص: المركز;
}
طريقة أخرى هي استخدام عنصر ديف عرض ثابت وتعيين الهوامش اليسرى واليمنى إلى تلقائي. على سبيل المثال:
كما ترى من المثال ، سيتم توسيط النص تلقائيا على الصفحة.
واحدة من أسهل الطرق لمحاذاة الخط في الوسط هو استخدام أنماط كس. للقيام بذلك ، يمكنك تطبيق الخاصية
النص الخاص بك
2. باستخدام فليكس بوكس
فليكسبوكس هو أداة كس قوية التي تجعل من السهل لمحاذاة العناصر داخل حاوية. لمحاذاة الخط في الوسط باستخدام فليكسبوكس ، يمكنك استخدام التعليمات البرمجية التالية:
3. باستخدام الجداول
هناك طريقة أخرى لمحاذاة الخط في المنتصف وهي استخدام الجداول. يمكنك إنشاء جدول مع خلية واحدة ووضع النص فيه. ثم قم بمحاذاة النص في المنتصف
باستخدام محاذاة = "مركز" السمة
النص الخاص بك
إذا كنت بحاجة إلى محاذاة خط أكثر تعقيدا في المنتصف أو دعم للمتصفحات القديمة ، فيمكنك استخدام جافا سكريبت. على سبيل المثال ، باستخدام مسج ، يمكنك استخدام التعليمات البرمجية التالية: