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

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