كيفية جعل النص في زر توسيط باستخدام كس

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

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

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

1. توسيط النص في زر باستخدام كس: دليل مفصل
2. 1. استخدام خاصية محاذاة النص
3. 2. باستخدام خاصية ارتفاع الخط
4. 3. باستخدام فليكس بوكس
5. 4. باستخدام تحديد المواقع
6. كيفية محاذاة النص في وسط الزر: تعليمات خطوة بخطوة
7. محددات كس اللازمة لمحاذاة النص في الزر
8. أمثلة التعليمات البرمجية لتوسيط النص في زر باستخدام كس
9. نقاط مهمة عند محاذاة النص في الزر
10. سؤال وجواب
11. كيف يمكنني توسيط النص في زر باستخدام المغلق?
12. كيف يمكنني جعل النص في زر تركزت أفقيا وعموديا?
13. هل من الممكن لمحاذاة النص في الزر إلى المركز دون استخدام المغلق?
14. كيف يمكنني تغيير حجم النص في الزر وما زلت أبقيه في المنتصف? توسيط

النص في الزر باستخدام كس: دليل مفصل

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

1. استخدام خاصية محاذاة النص

طريقة سهلة لتوسيط النص في زر هو استخدام خاصية محاذاة النص المغلق مع قيمة المركز. فيما يلي مثال على رمز كس:

.زر {

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

}

باستخدام هذا الرمز ، سيتم توسيط النص الموجود داخل العنصر مع فئة "الزر".

2. باستخدام خاصية ارتفاع الخط

هناك طريقة أخرى لتوسيط النص في زر وهي استخدام خاصية ارتفاع خط كس. من خلال تعيين قيمة مساوية لارتفاع الزر ، سيتم توسيط النص. فيما يلي مثال على رمز كس:

.زر {

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

}

في هذا المثال ، تتوافق القيمة 40 بكسل مع ارتفاع الزر. تأكد من أن قيمة ارتفاع الخط تتوافق مع ارتفاع الزر لتحقيق التمركز المناسب.

3. باستخدام فليكس بوكس

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

.زر {

عرض: فليكس;

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

تبرير-المحتوى: مركز;

}

باستخدام هذا الرمز ، سيتم توسيط النص الموجود في الزر أفقيا وعموديا.

4. باستخدام تحديد المواقع

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

.زر {

المنصب: نسبي;

}

.زر سبان {

موضع: مطلق;

أعلى: 50%;

اليسار: 50%;

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

}

في هذا المثال ، يتم توسيط النص عن طريق تعيين الموضع حسب الموضع المطلق وتطبيق القيم أعلى: 50 ٪ ، اليسار: 50 ٪ وتحويل: ترجمة(-50 ٪ ، -50٪).

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

كيفية محاذاة النص في وسط الزر: تعليمات خطوة بخطوة

الخطوة 1: إنشاء عنصر زر باستخدام علامة

الخطوة 2: إضافة فئة إلى الزر باستخدام سمة الفئة

الخطوة 3: تحديد أنماط الزر في كس

مثال:

الخطوة 4: إضافة نص داخل العلامة

مثال:

زر

الخطوة 5: تحقق من النتيجة واضبط حجم الزر ومحاذاة النص في المنتصف إذا لزم الأمر

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

محددات كس اللازمة لمحاذاة النص في الزر

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

}

1. غالبا ما يواجه مطورو الويب مهمة محاذاة النص في وسط الزر. هناك عدة طرق لتحقيق هذا الهدف باستخدام كس.
2. زر

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

زر