يتم استخدام CSS بشكل أساسي لتوفير أفضل نمط لصفحة الويب بتنسيق HTML. باستخدام CSS، يمكننا تحديد ترتيب العناصر في الصفحة.
هناك طرق مختلفة لمحاذاة الزر الموجود في وسط صفحة الويب. يمكننا محاذاة الأزرار أفقيًا وعموديًا. يمكننا توسيط الزر باستخدام الطرق التالية:
دعونا نفهم الطرق المذكورة أعلاه باستخدام بعض الرسوم التوضيحية.
مثال
في هذا المثال نستخدم محاذاة النص الخاصية وتعيين قيمتها إلى مركز . يمكن وضعها إما في علامة نص أو في علامة div الأصلية للعنصر.
وهنا نضع محاذاة النص: مركز؛ في علامة div الأصلية لعنصر الزر.
Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me اختبره الآن انتاج |
مثال
في هذا المثال نستخدم العرض: الشبكة؛ الممتلكات، و الهامش: سيارة؛ ملكية. وهنا نضع العرض: الشبكة؛ في علامة div الأصلية لعنصر الزر.
كثافة العمليات لمضاعفة
سيتم وضع الزر في وسط الأوضاع الأفقية والرأسية.
Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> اختبره الآن انتاج |
مثال
إنه مثال آخر لوضع الزر في المنتصف. في هذا المثال نستخدم العرض: فليكس؛ ملكية، ضبط المحتوى: مركز؛ الممتلكات، و محاذاة العناصر: مركز؛ ملكية.
سيساعدنا هذا المثال في وضع الزر في منتصف الوضعين الأفقي والرأسي.
Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me اختبره الآن انتاج |
