X

جستجو


وسط چین کردن همه چیز در CSS

وسط چین کردن همه چیز در CSS
  • اشتراک گذاری

وسط چین کردن همه چیز در CSS چه بصورت عمودی و چه بصورت افقی

با سلام خدمت تمامی همراهان شورت کدز ، امروز قصد داریم آموزش وسط چین کردن در CSS را آموزش دهیم . وسط چین کردن حالت های مختلفی دارد مثل وسط چین کردن المان های Display:block ، المانهایی با Position:absolute و مدلهای مختلف دیگر که نیاز به وسط چین کردن آنها داریم . خب بریم سراغ آموزش این مبحث در CSS .

Margin

با استفاده از Margin میتوانید المانهایی با Display: block و همچنین Display:inline-block را وسط چین قرار دهید . بطور مثال در کد زیر ما مقدار فاصله از چپ و راست را برابر با مقدار اتوماتیک قرار دادیم تا مقدار باقی مانده محتوا ، به یک میزان به هر دو طرفین داده شود.

.center{
margin : 0 auto;
}

Text-align

همان طور که از نامش پیداست بیشتر برای متون کاربرد دارد . اما شما با دادن این مقدار به والد هر المان که فرزندانش دارای Display: block و یا Display: Inline-block میتوانید آنهارا به صورت وسط چین قرار دهید اما فراموش نکنید که باید این مقدار را به والد المان مد نظرتون بدهید . نمونه کد جهت وسط چین کردن با این روش :

.center{ text-align:center; }

وسط چین کردن تصاویر

برای وسط چین تصاویر دو راه حل وجود دارد اما در دو حالت شما باید Display: block و یا Display: Inline-block به تصویر خود بدهید و سپس یا به آن المان Margin دهید و یا به والد آن Text-align بدهید.

div{
   text-align:center;
}
div img{ 
display:block;
}

و یا


div img{ 
display:block;
margin:0 auto;
}

وسط چین کردن با استفاده از Left و Right

برای استفاده از این روش باید مقدار position المان شما برابر با absolute یا fixed باشد تا بتوانید از این روش زیر استفاده کنید . به عنوان نمونه کد زیر را در نظر بگیرید :

.center{
  position: absolute;
  top : 50%;
  right : 50%;
  transform: translate( 50%, -50% );
}

در کد بالا ما ابتدا المان خود را به مقدار 50 درصد از سمت راست فاصله داده ایم سپس با استفاده از translate(50%, -50%) از سمت چپ با استفاده از transform به مقدار 50 درصد حرکت کرده ایم و از سمت پایین نیز به مقدار 50 درصد جابجا شده ایم . بصورت کلی برای این کار باید هر زمان از left استفاده میکنید مقدار translate شما برابر با مقدار left اما در جهت معکوس باشد. بهتر بگم هر وقت مقدار راست دادید باید به سمت چپ با translate جابجا شوید و برعکس . در پوزیشن fixed هم تفاوتی ایجاد نمیکند .

flex

شما برای وسط چین کردن میتوانید از فلکس هم استفاده کنید که در زیر نمونه کد استفاده از آن آمده است

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

خب اول باید عرض کنم برای استفاده از این دستور حتما باید display المان شما برابر با flex باشد . کد کد بالا justify-content که مقدار center را گرفته است برای وسط چین کردن افقی مورد استفاده قرار گرفته است و مقادیر دیگری مانند space-around که برای وسط چین کردن چند باکس در کنار یکدیگر و دادن فضای خالی برابر به آنها استفاده میشود و یا space-evenly که مانند کد بالا کاربرد دارد .

خط بعدی در کد ما مقدار align-items میباشد که به منظور وسط چین کردن عمودی مورد استفاده قرار میگیرد .

تراز عمودی با استفاده از line-height

برای استفاده از line-height بهتر است المان شما بصورت متنی باشد تا فضایی خالی در بالا و پایین متن و خطوط شما قرار بگیرد .

.center p{
  line-height: 2;
}

تراز عمودی با استفاده از vertical-align

برای اینکار ابتدا باید مقدار display شما برابر با inline-block باشد تا بتوانید از این خصیصه استفاده کنید . بعنوان مثال میتوانید از کد زیر بهره بجویید .

.center{
   display: inline-block;
   vertical-align: middle;
}