أثناء تصميم صفحات الويب ، يمكن للمطورين إضافة مكونات مختلفة ، بما في ذلك الصور والنصوص والجداول وغيرها. علاوة على ذلك ، يمكن محاذاة النص إلى المنتصف في div باستخدام خصائص CSS متعددة. الطريقة الأكثر شيوعًا لتوسيط النص أفقيًا هي استخدام ' محاذاة النص ' يصف. علاوة على ذلك ، يمكنك أيضًا استخدام ' ارتفاع خط ' و ' محاذاة عمودية 'لمحاذاة النص رأسياً.
سيوضح هذا المنشور طريقة توسيط النص عموديًا وكذلك أفقيًا داخل div:
كيفية توسيط النص أفقيًا داخل div؟
لتوسيط النص أفقيًا داخل div ، تحقق من الإجراء المحدد.
الخطوة 1: عمل حاوية div
في البداية ، أنشئ حاوية div بمساعدة ' الآن ، قم بالوصول إلى حاوية div بمساعدة ' بطاقة تعريف 'اسم السمة مع المحدد' # 'وتطبيق خصائص CSS التالية: يمكن ملاحظة أننا نجحنا في توسيط النص المحاذي أفقيًا داخل div الذي تم إنشاؤه: لتوسيط النص عموديًا داخل حاوية div ، اتبع الإرشادات المتوفرة. الخطوة 1: الوصول إلى حاوية div بادئ ذي بدء ، قم بالوصول إلى حاوية div التي تم إنشاؤها. الخطوة 2: تطبيق خصائص CSS على توسيط النص عموديًا بعد ذلك ، قم بتطبيق خصائص CSS المدرجة أدناه لتوسيط النص عموديًا في div: انتاج | لتوسيط النص عموديًا وأفقيًا داخل div ، أولاً ، أنشئ حاوية div بمساعدة عنصر
< شعبة بطاقة تعريف = 'محاذاة المحتوى' >
Linuxhint هو واحد من أفضل المواقع ل انشاء محتوى.
شعبة >
انتاج | 
الخطوة 2: قم بالوصول إلى حاوية div إلى Center Align Text
عرض: 80 ٪ ؛
هامِش: 0 آلي؛
الحشو: 20 بكسل ؛
خلفية: #c8edf3;
محاذاة النص: مركز ؛
اللون: RGB ( 49 و خمسة عشر و 240 ) ؛
}
هنا:
كيفية توسيط النص عموديًا داخل div؟
عرض: خلية الجدول.
العرض: 300 بكسل ؛
الارتفاع: 150 بكسل ؛
الحشو: 10 بكسل ؛
لون أزرق؛
لون الخلفية: RGB ( 248 و 215 و 166 ) ؛
الحد: 3 بكسل متقطع #f09d03;
محاذاة عمودية: وسط ؛
}
وفقًا لمقتطف الشفرة أعلاه:
لقد تعرفت على الإجراء الكامل لتوسيط النص داخل الحاوية في كلا الاتجاهين ، رأسياً وأفقياً. خاتمة