يمكن إضافة نص بسهولة في أي مكان ، ولكن بدون محاذاة ، قد يبدو غير قابل للتمثيل وأقل جاذبية. يمكن للنص غير المحاذي أيضًا أن يزعج المظهر الكامل لصفحة الويب. لمعالجة مثل هذه الأشياء في تطبيقات الويب ، يمكننا استخدام بعض الخصائص المفيدة لـ CSS التي ستساعدك على محاذاة النصوص في أي وقت من الأوقات.
ستوضح هذه المقالة كيفية محاذاة النص عموديًا في CSS.
كيفية محاذاة النص عموديًا في CSS؟
في CSS ، يمكنك استخدام الخصائص التالية لمحاذاة النص عموديًا:
-
- خاصية خط الارتفاع
- عرض ومحاذاة خصائص العناصر
الآن ، دعونا نستعرض كل طريقة واحدة تلو الأخرى!
الطريقة الأولى: استخدام خاصية line-height لمحاذاة النص عموديًا في CSS
ال ' ارتفاع خط 'تحدد المنطقة أدناه والعناصر المضمنة لأعلى. يحدد مسافة النص من العناصر الأخرى. باستخدام خاصية line-height ، يمكن بسهولة محاذاة النص عموديًا إلى المنتصف.
مثال
يوجد هنا نص داخل مربع (حد) موجود حاليًا في أعلى الجانب الأيسر. دعنا نحاذاة هذا النص للمركز عموديًا وأفقيًا:
الآن دعنا ننتقل إلى الطريقة التالية. ' فليكس بوكس 'هو تخطيط أحادي البعد يسمح لك بتنسيق HTML. يمكنك أيضًا استخدامه لمحاذاة العناصر رأسيًا أو أفقيًا. لذلك ، لنأخذ مثالاً ونقوم بمحاذاة النص عموديًا بمساعدة flexbox. مثال بادئ ذي بدء ، سنجعل الحاوية الخاصة بنا مرنة من خلال تحديد قيمة ' عرض 'الخاصية كـ' ثني '. بعد ذلك ، استخدم ' محاذاة العناصر 'لتعيين المحتوى في المركز عموديًا. علاوة على ذلك ، لمحاذاة المحتوى في المركز أفقيًا ، فإن ' تبرير المحتوى 'سيتم استخدام الخاصية: في CSS ، يمكن محاذاة النص عموديًا بسهولة بمساعدة ' ارتفاع خط ' منشأه. يمكنك أيضًا استخدام ' فليكس بوكس 'من أجل المحاذاة الرأسية للنص مع' عرض ' و ' محاذاة العناصر ' الخصائص. Flexbox هو تخطيط أحادي البعد ويستخدم ببساطة للمحاذاة الرأسية أو الأفقية للعناصر. قدم هذا المنشور طريقتين من أسهل الطرق التي يمكن أن تساعدك على محاذاة النص عموديًا في CSS.
للقيام بذلك ، أضف حاوية '
أفضل موقع تعليمي !
شعبة >
تم تشكيل الصندوق باستخدام ' 3 بكسل 'الحدود و' 250 بكسل ' ارتفاع. ال ' حجم الخط 'يتم استخدام الخاصية مع القيمة' 24 بكسل 'لجعل الخط مرئيًا. سنخصص div ' ارتفاع خط ' من ' 250 بكسل 'لمحاذاة نصه عموديًا في المنتصف. بعد ذلك ، سوف نستخدم ' محاذاة النص 'لمحاذاة النص في المركز:
ارتفاع الخط: 250 بكسل ؛
محاذاة النص: مركز ؛
حجم الخط: 24 بكسل ؛
الارتفاع: 250 بكسل ؛
الحدود: 3 بكسل صلبة ؛
}
كما ترى ، تمت محاذاة النص عموديًا إلى المركز باستخدام ارتفاع السطر وأفقياً إلى المركز باستخدام خاصية محاذاة النص. الطريقة 2: استخدام خاصية display and align-items لمحاذاة النص عموديًا في CSS
عرض: ثني ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: مركز ؛
حجم الخط: 24 بكسل ؛
الارتفاع: 200 بكسل ؛
الحدود: 3 بكسل صلبة ؛
}
تمت محاذاة النص المحدد إلى المركز بنجاح:
لقد قدمنا طرقًا متعلقة بمحاذاة النص عموديًا في CSS. استنتاج