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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



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