في عصر تخطيط الجدول، ليست هناك حاجة للتفكير كثيرًا في التوسيط الرأسي في الخلايا، حيث يكون الوضع الافتراضي هو التوسيط الرأسي لسطر واحد من النص، كما سيتم توسيط ثلاثة أسطر عموديًا. تنفيذ تخطيط صفحة ويب CSS بحيث يتم تغيير النموذج. يتم وضع النص في أعلى الحاوية بشكل افتراضي.
كما هو موضح أدناه:
| <الرأس> <العنوان>chinaz.com <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الارتفاع: 200 بكسل؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ } <الجسم> |
في هذه الحالة، كيفية توسيط النص عموديًا؟ تنقسم إلى ثلاث حالات:
1. إذا كان النص عبارة عن سطر واحد، فيمكنك استخدام تباعد الأسطر لحل المشكلة.
نضيف تعريف تباعد الأسطر إليه للحصول على تأثير توسيط سطر واحد من النص عموديًا.
| <الرأس> <العنوان>chinaz.com <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الارتفاع: 200 بكسل؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ ارتفاع الخط: 200 بكسل؛ } <الجسم> |
2. إذا كان النص متعدد الأسطر، فإن الحاوية الأصلية ليس لها ارتفاع ثابت.
يمكننا استخدام الحشو لحل المشكلة.
اضبط حشوة الحاوية على نفس القيمة الثابتة، ويزداد ارتفاع الحاوية مع زيادة المحتوى.
استخدم هذا لتحقيق التوسيط الرأسي للنص متعدد الأسطر.
| <الرأس> <العنوان>www.52CSS.com <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الحشو: 50 بكسل 0؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ } <الجسم> نحن ملتزمون بدعم مواقع الويب الصينية! |
| <الرأس> <العنوان>chinaz.com <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الحشو: 50 بكسل 0؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ } <الجسم> تصميم المواقع الإلكترونية باستخدام CSS موقع مشرفي المواقع في الصين نحن ملتزمون بدعم المواقع الصينية! |