كيفية توسيط النص عموديا في هتمل: طرق بسيطة

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

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

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

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

من المهم أن تتذكر أنه عند محاذاة النص عموديا ، يجب مراعاة طوله وحجم الخط. يمكن أن تؤدي المحاذاة غير الصحيحة إلى تشويه المعلومات بصريا على صفحة الويب.

1. التمركز العمودي
2. باستخدام فليكس بوكس
3. باستخدام الجداول
4. توسيط النص باستخدام تحديد المواقع
5. باستخدام الزائفة
6. العناصر التي تستخدم التدرجات
7. تحديد المواقع نسبة إلى ارتفاع الشاشة
8. سؤال وجواب
9. ما هي أسهل طريقة لتوسيط النص عموديا في أتش تي أم أل?
10. ما هي الطرق الأخرى لتركيز النص عموديا موجودة في أتش تي أم أل?
11. ما هي أفضل طريقة لتوسيط النص في أتش تي أم أل?
12. ما هو الفرق بين استخدام" محاذاة العناصر: مركز "و" خط الارتفاع " خصائص رأسيا مركز النص في أتش تي أم أل?
13. هل من الممكن استخدام" عرض:فليكس " الملكية لمركز عموديا كتل متعددة من النص?

التمركز العمودي

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

هناك عدة طرق لتحقيق تمركز النص الرأسي:

1. لتعيين نفس القيمة لارتفاع الصف وارتفاع الحاوية. على سبيل المثال:

1. و

الدفتيريا

لإنشاء جدول ومحاذاة النص إلى وسط الخلية:

1. ، استخدم ترتيبا مرنا للعناصر باستخدام خاصية كس

عرض: فليكس;

تبرير-المحتوى: مركز;

محاذاة العناصر: مركز;

}

يعتمد اختيار طريقة توسيط نص عمودي محددة على متطلبات مشروعك وخصائص صفحة الويب.

1. فليكسبوكس هو أداة قوية لخلق تخطيطات مرنة في المغلق. يمكن استخدامه أيضا لتوسيط النص عموديا على صفحة الويب.
2. .
3. .
4. .

تعيين الخاصية

محاذاة العناصر

للحاوية إلى

قيمة المركز

.

نموذج التعليمات البرمجية:

نص متمركز رأسيا

مثال على الأنماط:

.حاوية {

عرض: فليكس;

تبرير-المحتوى: مركز;

محاذاة العناصر: مركز;

}

1. النص الخاص بك هو هنا

إضافة أنماط لتركيز النص العمودي:

النص الخاص بك هو هنا

الآن سيتم توسيط النص عموديا في الحاوية باستخدام جدول.

توسيط النص باستخدام تحديد المواقع

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

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

إنشاء حاوية الأصل باستخدام العلامة

.

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

داخل الحاوية الأصل ، قم بإنشاء عنصر بالنص الذي تريد توسيطه.

تطبيق الأنماط على عنصر النص عن طريق تعيين الموضع: مطلق ؛ خاصية.

لتوسيط النص ، قم بتعيين خصائص عنصر النص أعلى: 50٪ ؛ واليسار: 50٪؛.

لتوسيط النص بدقة رأسيا وأفقيا ، أضف خاصية التحويل: ترجمة(-50 ٪ ، -50٪)؛. سيؤدي ذلك إلى تحويل العنصر بنسبة 50 ٪ من عرضه وارتفاعه إلى اليسار وإلى الأعلى.

نموذج التعليمات البرمجية:

النص الخاص بك

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

باستخدام العناصر الزائفة

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

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

على سبيل المثال ، لتوسيط النص عموديا داخل كتلة ، يمكنك استخدام الكود التالي:

النص الخاص بك

في هذا المثال ، يتم إنشاء عنصر زائف: من قبل ، والذي تم تعيينه لعرض الأنماط: كتلة مضمنة ، ارتفاع: 100 ٪ ومحاذاة رأسية: وسط. بعد ذلك ، بالنسبة إلى كتلة النص الموجودة داخل الحاوية ، يتم أيضا تعيين الشاشة: كتلة مضمنة ومحاذاة رأسية: الأنماط الوسطى. بفضل استخدام عنصر زائف والأنماط المحددة ، سيتم وضع النص عموديا في المركز.