• 0

كيف أضع عنصر وسط div باستخدام CSS؟

كي أتمكن من وضع  عنصر وسط وسم div لجأت إلى استخدام استخدام left: 50% لكن ما لاحظته أن العنصر يأتي وسط الشاشة ولسي وسط div.

فكيف أتمكن من فعل ذلك بشكل صحيح؟

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


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

لكي يتموضع العنصر وسط الوسم div والذي يعتبر العنصر الأب في هذه الحالة، عليك بإضافة الخاصية text-align:center إلى العنصر div و margin:auto إلى العنصر الإبن.

هذا مثال تطبيقي يشرح كيفية فعل ذلك:

صفحة html تضم div مع id بقيمةparent، مع 3 عناصر :

<div id="parent">
    <div id="child1" class="block center">a block to align center and with text aligned left</div>
    <div id="child2" class="block left">a block to align left and with text aligned left</div>
    <div id="child3" class="block right">a block to align right and with text aligned left</div>
</div>

كود css المتحكم في العناصر السابقة و الأب  parent أيضا:

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

صورة للنتيجة:

56cea208483b3_Screenshotfrom2016-02-2506

مثال تطبيقي

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


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

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

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

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


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

تسجيل الدخول

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


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