3 سال پیش
846

آموزش وسط قرار دادن 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;
}

 

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

با تشکر.

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

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

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

آ
آموزش 25 ترفند نایاب ویندوز 10،آموزش 25 ترفند نایاب ویندوز 10!! ،آموزش 25 ترفند نایاب ویندوز 10!! (پارت دوم)،آموزش 25 ترفند نایاب ویندوز، ترفند ها، ترفند، ترفند ویندوز، ترفند های ویندوز،ویندوز

آموزش ۲۵ ترفند نایاب ویندوز ۱۰!! (پارت دوم)

ادامۀ پارت اول ترفند های ویندوز 13- با Focus Assist مدیریت دقیقی روی نحوه نمایش اعلان‌ها را اعمال کنید ویژگی Focus Assist پیش از این به ‌نام Quiet Hours شناخته می‌ شد. این ویژگی در به ‌روز رسانی آوریل 2018 باز...

آموزش 25 ترفند نایاب ویندوز 10،آموزش 25 ترفند نایاب ویندوز 10!! ،آموزش 25 ترفند نایاب ویندوز 10!! (پارت دوم)،آموزش 25 ترفند نایاب ویندوز، ترفند ها، ترفند، ترفند ویندوز، ترفند های ویندوز،ویندوز

آموزش ۲۵ ترفند نایاب ویندوز ۱۰!! (پارت اول)

جلوگیری از هک ایمیل و پسورد،جلوگیری از هک ایمیل و پسورد!،جلوگیری از هک ایمیل،جلوگیری از هک پسورد،هک ایمیل،هک پسورد

جلوگیری از هک ایمیل و پسورد!

نحوه کار بار نرم افزار RAR اندروید،اندروید،RAR،نرم افزار RAR،

نحوه کار بار نرم افزار RAR اندروید

10 کد برتر محیط cmd

۱۰ کد کاربردی محیط Cmd در سیستم عامل ویندوز