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

محمد بوسكوري · 24 فبراير 2016

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

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

E.Nourddine · 25 فبراير 2016

لكي يتموضع العنصر وسط الوسم 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;
}