تعد محاذاة النص في منتصف الصفحة مهمة مهمة عند إنشاء صفحات الويب. يتيح لك ذلك جعل النص أكثر قابلية للقراءة وجاذبية لزوار الموقع. في هذا الدليل العملي ، وسوف ننظر في عدة طرق لمحاذاة الخط إلى منتصف الصفحة باستخدام هتمل و كس.
واحدة من أسهل الطرق لمحاذاة النص في منتصف الصفحة هي استخدام خاصية كس محاذاة النص. تطبيق قاعدة كس التالية على الحاوية التي تحتوي على النص:
محاذاة النص: المركز;
إذا كنت تريد محاذاة عنصر فردي واحد فقط ، وليس محتوى الصفحة بالكامل ، فيمكنك استخدام النمط المدمج. على سبيل المثال:
نص للمحاذاة
إذا كنت ترغب في محاذاة النص ليس فقط أفقيا ، ولكن أيضا عموديا ، يمكنك استخدام مزيج من خصائص كس العرض: الجدول والعمودي محاذاة. هنا مثال:
- بغض النظر عن الطريقة المختارة ، تعد محاذاة الخط في منتصف الصفحة جانبا مهما عند إنشاء مواقع ويب مبهجة من الناحية الجمالية وقابلة للقراءة.
- المبادئ الرئيسية
- باستخدام هتمل و كس
- الموقع في المركز أفقيا
الموقع في المركز عموديا
النتائج
| المبادئ الرئيسية | لمحاذاة الخط إلى منتصف الصفحة ، تحتاج إلى إنشاء حاوية تحتوي على كل النص. يمكن تمثيله كعنصر كتلة ، مثل |
| ضبط المحاذاة | |
| لتوسيط النص في الحاوية ، استخدم خاصية كس | ارتفاع الخط |
و
عمودي محاذاة
، بينما يقوم الآخرون بإنشاء عناصر إضافية وتخصيص أنماطهم.
سيسمح لك اتباع هذه المبادئ بمحاذاة النص في منتصف الصفحة وإنشاء تمثيل مرئي مناسب وجمالي للمستخدمين.
باستخدام هتمل و كس
النص
باستخدام هذا الأسلوب ، سيتم محاذاة النص أفقيا في وسط الصفحة. ومع ذلك ، لمحاذاة النص عموديا ، تحتاج إلى استخدام تقنية مختلفة.
للمحاذاة الرأسية ، يمكنك استخدام تقنية تعتمد على استخدام الجدول. إنشاء جدول مع خلية واحدة نضع فيها نصنا:
النص
يحدد هذا التصميم ارتفاع الجدول إلى 100 فولت في الساعة (ارتفاع المنطقة المرئية من الصفحة) ، ثم يستخدم المحاذاة الرأسية: الخاصية الوسطى لمحاذاة النص عموديا ، ومحاذاة النص: خاصية الوسط للمحاذاة أفقيا.
باستخدام هتمل و كس ، يمكنك التلاعب وضبط تخطيط النص على الصفحة ، وتحقيق النتيجة المرجوة ومحاذاة الخط في الوسط.
موقع أفقي في المركز
لمحاذاة النص أفقيا في وسط الصفحة ، يمكنك استخدام التعليمات البرمجية التالية:
يمكنك أيضا استخدام كس لتحقيق نفس النتيجة:
لمحاذاة الخط عموديا في منتصف الصفحة ، يمكنك استخدام أساليب وخصائص كس المختلفة.تحويل: ترانزلاتي(-50٪);. للقيام بذلك ، تحتاج إلى تعيين وضع الحاوية المطلق
موضع: مطلق;
وتعيين خاصية لذلك
أعلى: 50%;
، وكذلك تحديد الممتلكات
تحويل: ترانزلاتي(-50٪);
النص
في هذه المقالة ، نظرنا في طرق مختلفة لمحاذاة الخط إلى منتصف الصفحة. لقد درسنا التقنيات الأساسية المستخدمة في هتمل و كس ، وكذلك النظر في أمثلة لتطبيقها.
تعد محاذاة الخط في منتصف الصفحة جانبا مهما من تصميم الويب. يسمح لك بإنشاء مظهر أكثر جمالية وتوازنا لصفحة الويب.
تسمح لك هذه الطريقة بمحاذاة النص أفقيا وعموديا في المنتصف. للقيام بذلك ، تحتاج إلى إضافة قواعد كس
عرض: فليكس;
و