كيفية تغيير الوضع الرأسي للخط: دليل لتغيير المحاذاة الرأسية للخط

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

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

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

هناك طريقة أخرى لتغيير المحاذاة الرأسية للنص وهي استخدام خاصية حشو كس. يسمح لك بتعيين مسافة بادئة داخلية (حشوة) لكتلة من النص. على سبيل المثال ، يمكنك تعيين الجزء العلوي من الحشو: 10 بكسل ؛ والجزء السفلي من الحشو: 10 بكسل ؛ لتعيين مسافة بادئة داخلية تبلغ 10 بكسل في أعلى النص وأسفله. من المهم أن تتذكر أنه عند استخدام الحشو ، قد يتغير حجم العنصر ، لذلك يجدر التحقق من أن تغيير الهوامش لن يؤثر على تخطيط الصفحة.

1. كيفية تغيير تخطيط الخط: دليل للمحاذاة الرأسية
2. باستخدام خاصية كس" خط الارتفاع " لتغيير الوضع الرأسي للخط
3. تغيير المحاذاة الرأسية باستخدام خاصية كس "المحاذاة الرأسية"
4. استخدام فليكس بوكس للتحكم في الوضع الرأسي للخط

كيفية تغيير تخطيط الخط: دليل للمحاذاة الرأسية

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

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

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

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

باستخدام خاصية كس" خط الارتفاع " لتغيير الوضع الرأسي للخط

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

بناء الجملة لاستخدام خاصية "ارتفاع الخط" في كس:

• خط الارتفاع: عادي; - تحدد القيمة "عادي" المحاذاة الرأسية القياسية للخط ، حيث يكون ارتفاع سطر النص حوالي 1.2 شريط (اعتمادا على الخط وخصائص العنصر).
• ارتفاع الخط: الرقم ؛ - تحدد قيمة الرقم ارتفاع سطر النص كمضاعف لارتفاع الخط الأساسي. على سبيل المثال ، القيمة هي "1.5 " سيزيد من ارتفاع الخط حتى مرة ونصف من ارتفاع الخط الأساسي.
• ارتفاع الخط: النسبة المئوية ؛ - تحدد قيمة النسبة المئوية ارتفاع الخط كنسبة مئوية من ارتفاع الخط الأساسي. على سبيل المثال ، ستزيد قيمة "150 ٪" من ارتفاع الخط إلى 1.5 ضعف ارتفاع الخط الأساسي.

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

مثال على استخدام خاصية "ارتفاع الخط" في كس:

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

تغيير المحاذاة الرأسية باستخدام خاصية كس "المحاذاة الرأسية"

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

خصائص "المحاذاة الرأسية" للنص:

• "خط الأساس" — محاذاة النص على طول خط الأساس (افتراضيا);
• "الفرعية" — محاذاة النص كرمز منخفض;
• "سوبر" — محاذاة النص كمؤشر علوي;
• "أعلى" - محاذاة النص على طول الحد العلوي للعنصر;
• "وسط" — محاذاة النص في منتصف العنصر;
• "أسفل" - محاذاة النص على طول الحد السفلي للعنصر;
• "نص أعلى" - محاذاة النص على طول الحد العلوي لمحتوى العنصر;
• "نص-أسفل" - محاذاة النص على طول الحد السفلي لمحتوى العنصر.

خصائص "المحاذاة الرأسية" للصور:

• "خط الأساس" - محاذاة الصورة على طول خط الأساس;
• "أعلى" - محاذاة الصورة على طول الحد العلوي للعنصر;
• "وسط" — محاذاة الصورة في منتصف العنصر;
• "أسفل" - محاذاة الصورة على طول الحد السفلي للعنصر;
• "نص أعلى" - محاذاة الصورة على طول الحد العلوي لمحتوى العنصر;
• "نص-أسفل" - محاذاة الصورة على طول الحد السفلي لمحتوى العنصر;
• "الفرعية" — محاذاة الصورة كرمز منخفض;
• "سوبر" — محاذاة الصورة كمؤشر علوي.

يمكن أيضا استخدام خاصية "المحاذاة الرأسية" لمحاذاة عناصر الجدول ، مثل الخلايا ، داخل صف الجدول.

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

استخدام فليكس بوكس للتحكم في الوضع الرأسي للخط

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

• عرض: فليكس;

بعد ذلك ، يمكننا استخدام خصائص فليكسبوكس إضافية لتخصيص تخطيط النص.:

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

مثال على استخدام فليكس بوكس للتحكم في الوضع الرأسي للخط:

نموذج النص