یکی از پرتکرارترین سوالاتی که در زمینه آموزش وردپرس و قالب های html مطرح می شود چیزی نیست جز آموزش راست چين كردن قالب html یا چپ چین و وسط چین کردن آن. در ادامه قصد داریم در مدادسبز مفصلا در رابطه با این موضوع صحبت کرده و روش های مختلفی که برای این کار مطرح می شوند را با هم بررسی کنیم، پس با ما همراه باشید.

آموزش راست چين كردن قالب html

شاید بی شک یکی از پرتکرارترین پرسش هایی که برای آماتورهای html پیش می آید نحوه تراز کردن قالب باشد. سوال اصلی این دسته از افراد این است که چطورر می توان یک متن، یا عکس و یا حتی شی ای خاص را در وب پیج مورد نظر در حالت راست چین و یا حالات دیگر نظیر چپ چین و وسط چین قرار داد؟ پیش از پرداختن به آموزش راست چين كردن قالب html خوب است بدانید که المان هایی که برای html مطرح می شوند در دو دسته کلی قرار می گیرند:

1. متون و المان هایی که به نام به متن شناخته می شوند که لینک ها و همینطور تصواویر در این دسته قرار می گیرند.
2. تگ های اچ تی ام ال و المان های بلاکی هم دسته دوم هستند که از جمله آنها میتوانیم به جدول ها و همینطور تگ div یا سایر تقسیم بندی ها اشاره کنیم.

اما آشنایی با این المان ها چه کمکی به ما میکند؟ اصلا این دو المان با یکدیگر چه فرقی دارند؟ به طور کلی تگ های بلاکی در پس و پیش خود یک خط جدید به وجود می آورند. این یعنی پهنای این المان ها 100 درصد بوده و آنها یک خط کامل را شامل می شوند. عنصرهای بلاکی موارد زیر را در برمیگیرند:

• پاراگراف ها
• جدول ها
• لیست ها
• تگ های عنوان
• فرم ها

در ادامه با هم میبینیم که موقعیت افقی هر کدام از این المان های html به چه صورت مشخص می شود.

1. استفاده از ویژگی align در تگ <p>

نخستین روشی که برای آموزش راست چين كردن قالب html معرفی میکنیم استفاده از ویژگی به نام align است که در تگ <p> می توانید به ان دست پیدا کنید. همانطور که می دنید در حالت کلی متن ها درر اچ تی ام ال درداخل یک تگ پی قرار می گیرند که به ان تگ پاراگراف هم گفته می شود.

 این تگ یک مشخصه ییا همان attribute دارد که align نامیده می شود. این مشخصه می تواند مقدارهای left, right و center را گرفته و با توجه به مشخصه دریافت شده متن موجود در تگ پی را چپ چین، راست چین و یا وسط چین کند.

این مشخصه یک مقدار دیگر به جز این سه مورد را نیز می پذیرد که justify نام دارد و با فعال کردن آن تمام خط هایی که در پاراگراف مورد نظر قرار دارند به یک اندازه درمی آیند. این یعنی حالتی که متن از هر دو طرف به یک اندازه بوده و مانند یک مستطیل کاملا منظم است.

در صورتی که شما برای مشخصه align در تگ p هیچ مقداری مشخص نکنید انگاه به صورت پیش فرض مقدار آن left خواهد بود. تگ <p> یک ویزگی کاربردی دیگر هم در این زمینه دارد و آن هم dir است. در این ویژگی شما می توانید جهت نوشته و متنتان را مشخص کنید که می تواند چپ به راست یا راست به چپ باشد.

مثلا برای زبان انگلیسی این مشخصه می بایست به صورت ltr: left to right و برای زبان فارسی rtl: right to left باشد. این atribiute به صورت پیش فرض روی حالت چپ به راست یا ltr قرار دارد.

2. بهره‌گیری از CSS برای راست چین کردن قالب html

در این قسمت نوبت به دومین روش آموزش راست چين كردن قالب html میرسد که به کمک css انجام می شود. در حال حاضریکی از بهترین راهکارهایی که برای چگونگی به نمایش درآوردن المان ها و تگ های داخل یک صفحه وب وجود دارد استفاده از css است.

علاوه بر المان ها و تگ ها شما می توانید از سی اس اس به منظور راست چین یا چپ چین کردن پاراگراف ها هم استفاده کنید. این ویژگی در سی اس اس به نام text-align شناخته می شود و عملکرد آن دقیقا شبیه به تگ <p> و مشخصه align است.

حتی مفادیری که برای این مشخصه تعریف شده اند هم دقیقا همان مقادیر مشخصه align در تگ پی هستند. ویژگی dir در تگ پی در سی اس اس جای خود را به مشخصه direction داده است و کارایی آن هم دقیقا مشابه همین ویژگی است. مقادیری که برای direction تعریف شده اند هم مثل dir دو مقدار rtl و ltr است.

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

راست چين كردن قالب html با استفاده از css برای المان های بلاکی

اجازه دهید از پاراگراف ها بیرون آمده و کمی به مشکل بزرگ تازه کارهای اچ تی ام ال در این زمینه بپردازیم که المان های بلاکی نظیر جدول ها هستند که در تگ div قرار می گیرند. شاید اولین راه حلی که برای این کار به ذهن میرسدم غیر استانداردترین انها باشد به این صورت که شما جدول و یا هر المانی که نیاز دارید آن را راست چین کنید را در یک تگ دیگر بگذارید.

 سپس نحوه چینش تگ والد را مطابق میل خودتان تنظیم کنید (مثلا راست چین) و به این شکل تلاش کنید که المان مورد نظر را راست چین کنید. علاوه بر غیر استاندارد بودن این روش، برخی مرورگرها هم از ان پشتیبانی نمی کنند و در نتیجه این روش کارآمد نیست.

بهترین کاری که در این زمینه می توانید انجام دهید استفاده از سی اس اس است. شما می بایست به المانی که قصد دارید نحوه چینش آن را تغییر دهید مشخصه های سی اس اس را نسبت دهید. توصیه میکنیم این بار به جای ویژگی align از مشخصه float در سی اس اس استفاده کنید.

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

اگر قصد وسط چین کردن المان های بلاکی را دارید بهترین انتخاب و در عین حال استانداردترین آنها استفاده از مشخصه margin است. تنها کافیست مقدار آن را از هر طرف به 50 درصد کاهش دهید و به راحتی المان مورد نظرتان را درست وسط صفحه ببینید.

خلاصه

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

به علاوه در این آموزش راست چين كردن قالب html در مورد المان های بلاکی هم صحبت کردیم و گفتیم که چطور می توانید آنها را به صورت راست چین شده و یا چپ چین و وسط چین درآورید. امیدواریم که این مطلب برای شما مفید واقع شده باشد.