وسط قرار دادن یک 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 هست. بصورت زیر:

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

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back
comment دیدگاه کاربران
احسان

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

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

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

نیاز به لاگین

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