3 سال پیش
1252

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

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

 

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

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

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

<div class="outer">  
  <div class="inner">7Learn</div>
</div>

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

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

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

.outer {
  border: 1px solid red;
  height: 200px;
  padding: 20px;
}
 
.inner {
  border: 1px solid blue;
  width: 30%;
  text-align: center;
  margin: 0 auto;
}

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

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

.outer {
  border: 1px solid red;
  height: 200px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
 
.inner {
  border: 1px solid blue;
  width: 30%;
  text-align: center;
}

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

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

 

.outer {
  border: 1px solid red;
  height: 200px;
  padding: 20px;
}
 
.inner {
  border: 1px solid blue;
  display: table;
  margin: 0 auto;
}

 

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

با تشکر.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب پر بازدید

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

محدود کردن گوشی های شیائومی در ایران – موبایل های شیائومی قفل میشوند؟

چند روز پیش کاربری در کوبا که موبایل شیائومی داشت گزارش کرده بود که موبایل او به طرز عجیبی قفل شده است. از دیروز خبر قفل شدن موبایل های شیائومی در ایران هم گذاشته شده است. دیروز در سایت XDA...

نصب ابزارهای کالی لینوکس روی سایر توزیع های دبیان،نصب ابزارهای کالی لینوکس

نصب ابزارهای کالی لینوکس روی سایر توزیع های دبیان(اوبونتو،مینت و …)

آموزش،ترفند،آموزش اتصال قالب،قالب های HTML،HTML،HTML و PHP، آموزش اتصال HTML به PHP انواع روش های اتصال HTML به PHP

آموزش اتصال قالب HTML به PHP

19ترفند گوگل،مرورگر،قابلیت های سرچ گوگل،ترفند گوگل،چگونه سرچ کنیم،قابلیت های گوگل که نمیدانیم

چرا گوگل بهترین موتور جست‌‌ و جو جهان شده؟

آموزش 2 ترفند مخفی ویندوز 10،آموزش 2 ترفند مخفی ویندوز 10

آموزش ۲ ترفند مخفی ویندوز ۱۰