توسيط للغاية
استخدِم place-items: center
لتوسيط عنصر داخل العنصر الرئيسي.
يجب أولاً تحديد الشبكة باعتبارها طريقة العرض، ثم كتابة place-items: center
على العنصر نفسه. place-items
هو اختصار لضبط كل من align-items
وjustify-items
في آن واحد. ومن خلال ضبطها على center
، يتم ضبط كل من align-items
وjustify-items
على center
.
.parent {
display: grid;
place-items: center;
}
وهذا يتيح توسيط المحتوى بشكل مثالي داخل العنصر الرئيسي، بغض النظر عن الحجم الأساسي.
<div class="parent">
<div class="box" contenteditable="">
:)
</div>
</div>
.parent {
display: grid;
place-items: center;
/* Just for parent demo size */
height: 100vh;
}
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2023-10-25 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2023-10-25 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]