• 0

كيف يمكن توسيط div باستخدام css؟

<div id="outer" style="width:100%">  
    <div id="inner">Foo foo</div>
</div>

اريد أن أجعل div التي بالداخل في وسط الأولى أفقيا ... بحيث  تكون نفس المسافة من جهة اليمين والشمال باستخدام css

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

باستخدام الكود الآتي:

<style>
        #outer {
            background-color: lightblue;
        }

        #inner {
            background-color: lightgreen;
            width: 50%;
            margin: 0 auto;
        }
    </style>

ملاحظة: قمت بوضع لونين لل div الأول والثاني للتوضيح

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يوجد أكثر من طريقة أسهلها 

#outer{
	text-align: center
}

شأهدي هذا المقال على حسوب io 

https://io.hsoub.com/webdev/20990

ملاحظة إستخدام id في css ليس جيد id تستخدم إن كان عنصر وأحد فقط.

تمّ تعديل بواسطة يوسف سيد

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

باستخدام الكود الآتي:

<style>
        #outer {
            background-color: lightblue;
        }

        #inner {
            background-color: lightgreen;
            width: 50%;
            margin: 0 auto;
        }
    </style>

ملاحظة: قمت بوضع لونين لل div الأول والثاني للتوضيح

​ليس دائمًا هذا الحل جيد مثلًا إن كان الحجم غير محدد فإن هذا الكود لن يعمل وإيضًا يجب ان يكون العرض (display) من نوع block مثل الافتراضي في الdiv إن كان نص مثلًا لن يكون في الوسط . 

تمّ تعديل بواسطة يوسف سيد

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • -1

السلام عليكم أخت ليلى

يمكنكِ استخدام الكود التالي :

وذلك باعطاء  الوسم 50 بالمائة من العرض و margin نجعلها auto  حتى تحسب أوتماتيكيا

#inner {
    width: 50%;
    margin: 0 auto;
}

 

و الكود التالي عند استخدام متصفح الاكسبلورر +8:

#inner {
    display: table;
    margin: 0 auto;
}

كما يمكنكِ الاطلاع على أساسيات css هنا :

http://academy.hsoub.com/code/css/تعرّف-على-أساسيات-css-r70/

تحياتي

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن