غالبا ما يواجه مطورو الويب مهمة توسيط العناصر على صفحة الويب. واحدة من أكثر المهام شيوعا هي توسيط الزر. بدون استخدام الأنماط المناسبة ، قد يبدو الزر بعيدا جدا أو بعيدا جدا عن العناصر الأخرى للصفحة ، مما قد يعطل تصميمها. في هذه المقالة ، سوف ننظر في عدة طرق لتوسيط زر باستخدام كس ، والتي سوف تكون مفيدة للمبتدئين والمطورين ذوي الخبرة.
الطريقة الأولى لتوسيط الزر هي استخدام خاصية محاذاة النص. قم بتطبيق هذه الخاصية على العنصر الأصل للزر عن طريق تعيين قيمته على "المركز". على سبيل المثال ، إذا كان الزر الخاص بك داخل كتلة
، يمكنك ضبط النمط على النحو التالي:
# حاوية {
محاذاة النص: المركز;
}
}
}
- إذا كان هناك العديد من الطرق لتوسيط الزر باستخدام كس ، يمكنك اختيار الطريقة الأنسب لحالة معينة. سيساعدك هذا في إنشاء تصميم جميل ومحترف لصفحات الويب الخاصة بك.
- توسيط الزر
- كيف يمكنني توسيط زر باستخدام المغلق?
- تطبيق الهامش: تلقائي;
- باستخدام فليكسبوكس لتوسيط الزر
- سؤال وجواب
- كيف يمكنني توسيط زر باستخدام المغلق?
- ما هي الطرق الأخرى لتوسيط زر باستخدام المغلق موجودة?
- كيف يمكنني استخدام طريقة فليكس بوكس لتوسيط زر?
- كيف يمكنني استخدام طريقة تخطيط الشبكة لتوسيط زر?
هل من الممكن توسيط الزر على محور واحد فقط?
توسيط الزر
يعد توسيط الزر مهمة مهمة لضمان بنية مرئية جيدة لواجهة موقعك. هناك عدة طرق لتوسيط زر باستخدام كس. دعونا ننظر إلى بعض منهم.
1. التمركز الأفقي:
تبرير-المحتوى: مركز;
لتوسيط العناصر داخل الحاوية أفقيا.
2. التمركز العمودي:
محاذاة العناصر: مركز;
لتوسيط العناصر داخل الحاوية عموديا.
إضافة واحدة من هذه القواعد كس إلى الحاوية الخاصة بك سوف تسمح لك لتوسيط زر داخله. يمكنك اختيار الطريقة المناسبة حسب احتياجاتك وتفضيلاتك.
كيف يمكنني توسيط زر باستخدام المغلق?
يمكن أن يكون توسيط زر على صفحة الويب قرارا مهما في التصميم لجذب انتباه المستخدم إلى الوظيفة المطلوبة. باستخدام كس ، يمكنك تحقيق التمركز الأفقي والرأسي للزر على الصفحة.
- زر
/ * المغلق */
.حاوية {
عرض: الجدول;
العرض: 100%;
الارتفاع: 100%;
/ * أنماط الحاويات الأخرى */
}
.زر {