في عصر تخطيط الجدول، ليست هناك حاجة للتفكير كثيرًا في التوسيط الرأسي في الخلايا، حيث يكون الوضع الافتراضي هو التوسيط الرأسي لسطر واحد من النص، كما سيتم توسيط ثلاثة أسطر عموديًا. تنفيذ تخطيط صفحة ويب CSS بحيث يتم تغيير النموذج. يتم وضع النص في أعلى الحاوية بشكل افتراضي.
كما هو موضح أدناه:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <الرأس> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <العنوان>chinaz.com</title> <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الارتفاع: 200 بكسل؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ } </نمط> </الرأس> <الجسم> <div id="MrJin"><a href="http://www.52CSS.com/">تصميم ويب CSS</a></div> </الجسم> </html> |
في هذه الحالة، كيفية توسيط النص عموديًا؟ تنقسم إلى ثلاث حالات:
1. إذا كان النص عبارة عن سطر واحد، فيمكنك استخدام تباعد الأسطر لحل المشكلة.
نضيف تعريف تباعد الأسطر إليه للحصول على تأثير توسيط سطر واحد من النص عموديًا.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <الرأس> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <العنوان>chinaz.com</title> <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الارتفاع: 200 بكسل؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ ارتفاع الخط: 200 بكسل؛ } </نمط> </الرأس> <الجسم> <div id="MrJin"><a href="http://www.52CSS.com/">تصميم ويب CSS </a></div> </الجسم> </html> |
2. إذا كان النص متعدد الأسطر، فإن الحاوية الأصلية ليس لها ارتفاع ثابت.
يمكننا استخدام الحشو لحل المشكلة.
اضبط حشوة الحاوية على نفس القيمة الثابتة، ويزداد ارتفاع الحاوية مع زيادة المحتوى.
استخدم هذا لتحقيق التوسيط الرأسي للنص متعدد الأسطر.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <الرأس> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <العنوان>www.52CSS.com</title> <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الحشو: 50 بكسل 0؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ } </نمط> </الرأس> <الجسم> <div id="MrJin"><p><a href="http://www.52CSS.com/">تصميم ويب CSS </p><p>نحن ملتزمون بدعم مواقع الويب الصينية! </a></p></div> </الجسم> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <الرأس> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <العنوان>chinaz.com</title> <نمط النوع = "نص/CSS"> #السيدجين { العرض: 500 بكسل؛ الحشو: 50 بكسل 0؛ الحدود: 1 بكسل صلب #03c؛ محاذاة النص:مركز؛ } </نمط> </الرأس> <الجسم> <div id="MrJin"><a href="http://www.52CSS.com/"> <p>تصميم المواقع الإلكترونية باستخدام CSS</p> <p>موقع مشرفي المواقع في الصين</p> <p>نحن ملتزمون بدعم المواقع الصينية! </ص> </a></div> </الجسم> </html> |