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

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

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

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

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

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

.توسيط {

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

}

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

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

تعليمات لتوسيط الخط على الموقع

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

2. إذا كنت تريد توسيط أسطر نصية فردية فقط داخل عنصر ، فيمكنك استخدام علامة
4. محاذاة النص: المركز;

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

، قم بتطبيق النمط التالي:

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

المبادئ الأساسية لتركيز الخط

• باستخدام خصائص المغلق
• في تركيبة مع
• يمكن استخدام خاصية كس لتوسيط النص عموديا
• باستخدام كس فليكسبوكسيس أو خصائص كس

الهامش: تلقائي;

لتوسيط العنصر أفقيا وعموديا.

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

نصائح لتركيز الخط الفعال

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

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

شعبة {

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

}

2. لتوسيط العناصر على الصفحة عموديا ، يمكنك استخدام خصائص كس "العرض: فليكس ؛" و "محاذاة العناصر: المركز؛". على سبيل المثال:

الجسم {

عرض: فليكس;

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

}

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

شعبة {

الارتفاع: 100 بكسل;

ارتفاع الخط: 100 بكسل;

}

4. لتوسيط النص أفقيا وعموديا داخل الكتلة ، يمكنك استخدام خاصية كس "تحويل" مع القيمة "ترجمة(-50 ٪ ، -50٪)". على سبيل المثال:

شعبة {

موضع: نسبي;

اليسار: 50%;

أعلى: 50%;

تحويل: ترجمة (-50٪ ، -50٪);

}

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