آموزش وسط قرار دادن div در div دیگر با CSS

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

0 142

آموزش وسط قرار دادن div در div دیگر با CSS

 

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

لینک کانال تلگرام

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

آموزش وسط قرار دادن div در div دیگر با CSS

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

برای اینکار میتونیم از مقدار auto برای margin استفاده کنیم. کد CSS زیر رو ببینید:

همونطور که میبینید یک border برای هر دو div قرار دادیم تا بهتر قابل تشخیص باشن.

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

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

روش دیگه ای که مورد استفاده قرار میگیره، استفاده از display: table هست. بصورت زیر:

 

 

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

با تشکر.

شما همچنین ممکن است مانند بیشتر از نویسنده

ترک یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.