ورود ثبت نام
چیدمان عناصر ( وسط چین کردن و ... ) در فیلم آموزش CSS به زبان فارسی
» طراحی سایت » آموزش CSS » چیدمان عناصر ( وسط چین کردن و … ) در فیلم آموزش CSS به زبان فارسی
7497 بازدید

چیدمان عناصر ( وسط چین کردن و … ) در فیلم آموزش CSS به زبان فارسی

در این قسمت از فیلم آموزش CSS نحوه چیدمان عناصر مثل وسط چین کردن ، راست چین و چپ چین کردن آموزش داده شده است ، و این آموزش را می توانید به بخوانید یا به صورت فیلم آن را مشاهده کنید .

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

برای وسط چین کردن عناصر block level مثل تگ div می توانیم از خاصیت ; margin: auto استفاده کنیم و برای این که عنصر مورد نظر ما از فضای در نظر گرفته خارج نشود برای آن ویژگی width  را تعریف می کنیم .
نکته ای که باید به آن توجه کنید این است که اگر  width را تعیین نکنید و یا عرض آن عنصر برابر %100 باشد وسط چین کردن عمل نخواهد کرد .

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

.box1 {
	width: 60%;
	border: 3px solid green; 
	margin: auto;
}

وسط چین کردن متن

برای این که متنی را وسط چبن کنیم یعنی متن در وسط عنصر قرار بگیرد برای این کار از  خاصیت ; text-align: center استفاده می کنیم . مثل کد زیر :

.box1 {
	border: 3px solid green; 
	text-align: center;
}

وسط چین کردن عکس

برای این که عکس را وسط چین کنیم از خاصیت ; margin: auto و همین طور از خاصیت ; display: block استفاده می کنیم مانند کد زیر :

.box1 {
	width: 60%;
	display: block;
	margin: auto;
}

راست چین کردن و چپ چین کردن با خاصیت Position

همان طور که در مبحث position گفتم با استفاده از position می توانیم عنصر را به هر سمتی که خواستیم ببریم .
برای راست چین کردن عنصر از کد زیر استفاده کنید :

.box1 {
	width: 40%;
	position: absolute; 
	right: 0px; 
}

برای چپ چین کردن کافی است که به جای right از left استفاده کنیم مانند کد زیر :

.box1 {
	width: 40%;
	position: absolute; 
	left: 0px; 
}

راست چین و چپ چین کردن با استفاده از خاصیت float

با استفاده از float نیز می توان موقعیت عناصر را تغییر داد مثلاً برای راست چپن کردن کافیست به عنصر مقدار  ; float : right را بدهید ، مانند کد زیر :

.box1 {
	width: 40%;
	position: absolute; 
	left: 0px; 
}

چیدمان عمودی با استفاده از padding

مانند کد زیر می توان عناصر را به صورت عمودی چیدمان کرد در این کد از padding بالا و پایین استفاده می کنیم :

.box1 {
	padding: 100px 0px;
}

استفاده از line-height

با استفاده از خاصیت line-height می توان عناصر را به صورت عمودی چیدمان کرد در این جا باید به این نکته توجه کنید که مقدار line-height برابر مقدار height باشد :

.box1 {
	height: 300px;
	line-height: 300px;
	text-align: center;
}

فیلم آموزش چیدمان عناصر ( وسط چین کردن و … ) را می توانید از لینک زیر دانلود کنید .

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. mahtab.a گفت:

    سلام استاد خسته نباشید استاد ببخشید من یه مشکل بزرگ دارم تو نوشتن کدها با این درست عین کدی که گفتین رو نوشتم بازم اجرا نمیشه و برای تحویل وب سایتی که میخوام تحویل دانشگاه بدم برای پروژه به مشکل برخوردم و اینکه برنامه ای که گفته شده توش کدهارو بنویسم ویژوال استدیو کد هست میتونید راهنمایی وکمک کنید واینکه بقیه فیلم های اموزشی تون رو از کجا تهیه کنم مرسی

  2. s.Ali گفت:

    سلام استاد . . . یه سوال داشتم . . . اگر من یه قالب طراحی کنم 2 تا سطون داشته باشه (مثل قالب سایت عزیز Web30ty) وقتی که صفحه کوچک بشه اون دوتا سطون حذف بشه باید چیکار کنم ؟؟؟

    • رضا طوماری گفت:

      سلام
      این برای ریسپانسیو کردن هستش که تو نمایشگر های کوچکتر یا بزرگتر چجوری بشه قالب رو نشون داد .
      مطالبی در مورد ریسپانسیو کردن قالب بخونید مثلاً فریمورک های css مثل بوت استرپ یا w3.css