خالد العليان نشر 28 فبراير 2021 أرسل تقرير مشاركة نشر 28 فبراير 2021 أريد أن أعرف كيف أقوم بتوسيط div بداخل div آخر باستخدام Css؟ <div class="a"> <div class="b">asdasd</div> </div> 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 محمد أبو عواد نشر 28 فبراير 2021 أرسل تقرير مشاركة نشر 28 فبراير 2021 هناك العديد من الطرق لتوسيط div بداخل div, لنستعرض معا البعض منها الطريقة الأولى: نقوم بإعطاء div الداخلي width معين مثلا 50% ومن ثم نعطيه خاصية margin كما هو موضح في الكود الآتي .b{ width: 50%; margin: 0 auto; } عند اعطاء هذه الخصائص لل div الداخلي سوف يتوسط بداخل div الخارجي وسوف تكون النتيجة بهذا الشكل الطريقة الثانية: نستخدم خاصية table حيث نعطي عنصر div الداخلي هذه الخصائص .b{ display: table; margin: 0 auto; } سوف تكون النتيجة بهذا الشكلالطريقة الثالثة: سوف نستخدم خاصية flexbox لتوسيط ال div الداخلي بداخل ال div الخارجي, لاحظ لو سمحت الكود الآتي .a{ border:1px solid #f00; display: flex; justify-content: center;//لتوسيط المحتوى padding: 20px; } لاحظ أعطينا الdiv الخارجي خاصية display: flex; ومن ثم ثم قمنا بتوسيط المحتوى الذي بداخله سوف تكون النتيجة مشابهة لنتيجة الطريقة الثانية 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Sam Ahw نشر 28 فبراير 2021 أرسل تقرير مشاركة نشر 28 فبراير 2021 يوجد العديد من الطرق، وذلك يعتمد على النمط الذي تقوم باستخدامه في العرض Flex أو Grid أو حسب توزع العناصر ضمن الصفحة. ولكن أسهل طريقة في حال لم تكن تستخدم بنية محددة ولسرعة التوسيط يمكنك استخدام margin: auto مثال: <!DOCTYPE html> <html> <head> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <div style="background-color:yellow"> <div class="center">Hello World!</div> </div> </body> </html> وستحصل على النتيجة التالية: وكذلك margin-left: auto و margin-right: auto معاً لنفس العنصر. أما لتوسيط عنصر نصّي نستخدم text-align مع القيمة center كالتالي: .center { text-align: center; } وسيتم توسيط النص ضمن العنصر الحاوي له. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Abdulhamid Hamsho2 نشر 28 فبراير 2021 أرسل تقرير مشاركة نشر 28 فبراير 2021 وعليكم السلام ورحمة الله تعالى، يمكنك ذلك باستخدام الخاصية margin: auto; والتي تقوم بجعل الهامش في جميع الأطراف بشكل متساوي. يمكنك أيضًا مشاهدة الصورة في الأسفل والتي تشرح بشكل أفضل كيفية استخدام الهامش الخاص بالحاويات. ويمكنك توسيط الحاوية التي تملك الصنف b داخل الحاوية التي تحوي الصنف a باستخدام هذه الشيفرة: .b{ margin: auto; } بهذا الشكل تكون قد قمت بتوسيط العنصر الذي تريد بابسط طريقة. أتمنى لك التوفيق. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 خالد العليان نشر 28 فبراير 2021 الكاتب أرسل تقرير مشاركة نشر 28 فبراير 2021 شكرا لكم على شرحكم الكافي اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 28 فبراير 2021 أرسل تقرير مشاركة نشر 28 فبراير 2021 توجد عدة طرق لتوسيط العناصر أولاً بإستخدام ال flexbox تقوم .a{ display: flex; justify-content: center; /* للتوسيط أفقياً */ align-items: center; /* للتوسيط رأسياً */ } بإستخدام ال position .a{ position: relative; } .b{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } أما إذا كان العنصر الذي تريد توسيطه inline تقوم بإعطاء العنصر الأب text-align: center فقط اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
خالد العليان
أريد أن أعرف كيف أقوم بتوسيط div بداخل div آخر باستخدام Css؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.