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