وسط قرار دادن یک div در div دیگر با CSS



visibility  
mode_comment   ۲

وسط قرار دادن یک div در div دیگر با CSS

در این مطلب میخوایم نحوه وسط قرار دادن یک div در div دیگر رو با استفاده از روشهای مختلف بهتون آموزش بدیم.

کدهای HTML بصورت زیر هستند:

همونطور که میبینید 2 div درون همدیگر هستند و حالا میخوایم div داخلی رو وسط div بیرونی قرار بدیم. برای اینکار میتونیم از مقدار auto برای margin استفاده کنیم. کد CSS زیر رو ببینید:

همونطور که میبینید یک border برای هر دو div قرار دادیم تا بهتر قابل تشخیص باشن. عرض رو برای div داخلی مشخص کردیم با استفاده از margin: 0 auto فاصله اون رو از چپ و راست بصورت اتوماتیک قرار دادیم و با اینکار div مورد نظر در وسط قرار میگیره. بصورت زیر:

میبینید که div در وسط div بیرونی قرار گرفت. روش جدید دیگه ای که وجود داره استفاده از flexbox هست. بصورت زیر:

میبینید که display رو برای div بیرونی برابر با flex قرار دادیم و justify-content رو برابر با center قرار دادیم تا محتوای بصورت وسط چین قرار بگیره. روش دیگه ای که مورد استفاده قرار میگیره، استفاده از display: table هست. بصورت زیر:

به همین راحتی.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

comment دیدگاه کاربران
احسان

ممنون. آموزش ساده‌ ولی کاربردی هست.

محمد اسفندیاری

خواهش میکنم
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.