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

بسیاری از دانشجویان سون لرن از ما پرسیده بودند که چطور عکس، متن و یا شیء خاص در صفحه وب را که به حالت افقی قرار دارد وسط چین کنند. امروز در این پست به صورت کامل در مورد چینش افقی انواع متن ، عکس و اشیاء در صفحات HTML به روش‌های مختلف صحبت خواهیم کرد. قبل از هر چیز اجازه بدهید در یک دسته بندی کلی، اِلمان‌های html را به دو بخش تقسیم کنیم:

1. متن‌ها و اِلمان‌های شبه متن، مثل لینک‌ها و عکس ها
2. تگ‌ها و اِلمان‌های بلاکی، مثل جداول و تقسیم بندی‌ها ( مانند تگ div)

تفاوت دو مورد بالا در این است که تگ‌های بلاکی به صورت ضمنی، قبل و بعد از خود یک خط جدید ایجاد می‌کنند. به این معنی که پهنایی 100% دارند و یک خط را به طور کامل در برمی‌گیرند. عناصر بلاکی شامل پاراگراف‌ها ، لیست‌ها ، جدول‌ها ، فرم‌ها و تگ‌های عناوین هستند. برای مشخص کردن موقعیت افقی هر کدام از این دو دسته روش‌های مختلفی وجود دارد که در ادامه بررسی می‌کنیم.

روش اول: وسط چین کردن قالب html ( کهنه و منسوخ شده )

در این روش از تگ center که در ورژن‌های قدیمی HTML وجود داشت استفاده می‌شود. بعد از معرفی و رونمایی از CSS این تگ بازنشست شد و دیگر از آن استفاده نمی‌شود . البته هنوز هم توسط مرورگرها پشتیبانی می‌شود اما به احتمال زیاد در نسخه‌های آینده برای استاندارد سازی صفحات وب این تگ‌های HTML منسوخ شده، (تگ هایی مثل center و font) دیگر توسط مرورگرها پشتیبانی نمی‌شود تا طراحان وب را به سمت استفاده از CSS سوق دهند.

شما هر کدام از تگ‌های HTML، متن ها، عکس‌ها و غیره را که داخل تگ center قرار دهید، اون شئ به صورت وسط چین در صفحه وب نمایش داده خواهد شد. به طور مثال در کد زیر متن و عکس درون تگ center به وسط خط (از لحاظ افقی) منتقل می‌شوند. البته ما استفاده از این روش و این تگ‌ها را به دلیل منسوخ شدن توصیه نمی‌کنیم و در ادامه روش‌های استانداردتر را بررسی خواهیم کرد.

<center>
welcome to 7learn.com web design tutorials ...
<img src="image_url" />
</center>

روش دوم : تعیین موقعیت افقی محتوای پاراگراف در html با استفاده از ویژگی align در تگ <p>

در صفحات وب برای اینکه چینش افقی متن یک پاراگراف مشخص شود، معمولا متن‌ها درون تگ <p> که همان تگ پاراگراف است قرار می‌گیرند. برای این تگ یک attribute به نام align تعریف شده که می‌تواند مقادیر center ، left و right را دریافت کرده و به ترتیب متن درون پاراگراف رو چپ چین ، وسطچین و راست چین کند. البته ویژگی align مقداری به نام justify را هم می‌پذیرد که باعث می‌شود اندازه تمام خط‌های متن درون پاراگراف یکسان شود. به طوری که متن از دو طرف صاف مانده و حالت منظم به خودش بگیرد. در صورتی که مقداری برای align مشخص نکنید، به طور پیش‌فرض مقدار آن Left در نظر گرفته خواهد شد.

تگ پاراگراف یک ویژگی دیگر به نام dir دارد که مخفف direction (جهت) است. از این ویژگی برای مشخص کردن چپ به راست یا راست به چپ بودن یک زبان استفاده می‌شود. برای مثال زبان فارسی به خاطر راست چین بودن مقدار rtl (right to left) و زبان انگلیسی به خاطر چپ چین بودن مقدار ltr یعنی (left to right) را می‌گیرد. دقیقا مانند align، مقدار اولیه و پیش‌فرض ویژگی dir مخصوص زبان‌های انگلیسی و مقدار ltr است. پس یکی از روشهای نوشتن متن از راست به چپ در HTML استفاده از align در تگ P است. به چهار پاراگراف زیر نگاه کنید. متن درون هر پاراگراف توضیح چینش همان پاراگراف است.

<p>چپ چين و مناسب براي نوشته هاي چپ به راست</p>
<p dir="rtl">چپچين و مناسب زبان فارسي</p>
<p align="right">راست چپن و مناسب زبان انگليسي</p>
<p dir="rtl" align="right">راستچین و مناسب فارسی</p>

روش سوم : استفاده از CSS برای تعیین موقعیت افقی محتوای تگ ها

امروزه CSS بهترین روش برای شیوه نمایش عناصر و تگ‌های درون صفحه است و پیشنهاد می‌کنیم شما هم از این روش استفاده کنید. حتی برای کار با پاراگراف‌ها هم CSS انتخاب خوبی است. ویژگی text-align در CSS دقیقا همان کار ویژگی align در پاراگراف را انجام می‌دهد و دقیقا همان مقادیر را هم می‌پذیرد . به جای ویژگی dir در تگ p می‌توانیم از یک ویژگی به نام direction در CSS استفاده کنیم. این ویژگی هم مانند dir می‌تواند دو مقدار ltr و rtl رو بپذیرد.

مزیت استفاده از CSS برای این کار این است که دیگر محدود به تگ P نیست و شما می‌توانید از این ویژگی‌ها در تگ‌های مختلف استفاده کنید. همان چهار پاراگراف بالا که با ویژگی‌های HTML تگ P مثال زدیم را به یاد دارید؟ در ادامه به کمک ویژگی‌های معادل در CSS شیوه نمایش و چینش عناصر را تغییر می‌دهیم. فراموش نکنید که این دو روش از لحاظ نمایش ظاهری هیچ تفاوتی با هم ندارند و فقط این روش بهینه و استاندارد است.

<p>چپ چين و مناسب براي نوشته هاي چپ به راست</p>
<p style="direction:rtl">چپچين و مناسب زبان فارسي</p>
<p style="text-align:right">راست چپن و مناسب زبان انگليسي</p>
<p style="direction:rtl;text-align:right;">راستچین و مناسب فارسی</p>

برای استفاده از ویژگی‌های CSS داخل تگ‌های HTML، می‌توانیم از ویژگی style داخل آن تگ استفاده کنیم. در این روش ویژگی‌های CSS مختلف که با علامت semi-colon (;) از هم جدا شده‌اند به عنوان مقدار پذیرفته می‌شوند. همچنین برای تعیین چپنش افقی عکس ها، می‌توانید آن عکس را داخل یک تگ پاراگراف قرار دهید و برای آن تگ پاراگراف چینش مشخص کنید.

روش چهارم : استفاده از CSS برای تعیین موقعیت افقی المان‌های بلاکی مثل جدول‌ها و تقسیم بندی‌های صفحه (تگ div)

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

در این حالت ویژگی‌های CSS را به همان تگ که می‌خواهیم چینش آن را تغییر دهیم نسبت می‌دهیم. اینبار به جای align سراغ ویژگی float در CSS می‌رویم. Float به معنی شناور بودن می‌باشد و از این ویژگی برای راست چین یا چپ چین کردن یک اِلمان بلاکی استفاده می‌شود. این ویژگی دو مقدار left و right را می‌پذیرد و استفاده از هر کدام آن‌ها اِلمان بلاکی را به چپ یا راست شناور می‌کند. به طور مثال در کدهای زیر، مشاهده می‌کنید که Table به سمت راست و تگ Div به سمت چپ منتقل شده‌اند. دقت داشته باشید که خودشان به راست یا چپ جا به جا می‌شوند، نه محتوای آن‌ها.

<table style="width: 200px;float: right;">
<tr>
<td>7Learn.com Web Tutorials</td>
</tr>
</table>
<div style="width: 200px;float: left;">7Learn.com Web Tutorials</div>

در اِلمان‌های بلاکی به صورت پیش‌فرض پهنای هر اِلمان 100% است. برای همین با استفاده از ویژگی width مقدار 200 پیکسل را برای پهنای تگ جدول و div تعیین کردیم تا جا به جا شدن آنها در صفحه مشخص باشد. روش مرسوم و اصولی برای وسط چین کردن اِلمان‌های بلاکی استفاده از ویژگی margin در CSS است. ویژگی margin فاصله حاشیه یک تگ تا تگ پدر را مشخص می‌کند. شاید تعجب کرده باشید و برایتان سوال پیش آمده باشد که margin چه ربطی به وسط چین کردن یک اِلمان بلاکی دارد. خوب وقتی این فاصله را از چپ و راست به مقدار 50 درصد تغییر دهیم، در واقع آن اِلمان را به وسط صفحه انتقال داده‌ایم.

تگ margin چهار مقدار را با یک space جدا از هم، می‌پذیرد و به ترتیب فاصله تگ را از بالا، راست، پایین و چپ مشخص می‌کند. به طور مثال در پاراگراف زیر فاصله از بالای پاراگراف 10 پیکسل، از راست 7 پیکسل، از پایین 5 پیکسل و از چپ 3 پیکسل هستند.

<p style="width: 200px;margin: 10px 7px 5px 3px">7Learn.com</p>

همانطور که گفتم شما میتوانید به جای واحد pixel از % استفاده کنید. با قرار دادن مقدار 50% برای فاصله از چپ و راست، اِلمان به وسط صفحه می‌آید. همچنین برای انتقال یک اِلمان بلاکی به وسط، رایج است که با margin فاصله از بالا را مشخص می‌کنند و به جای سه مقدار دیگه از کلمه auto استفاده می‌کنند. اینکار به صورت پیش‌فرض فاصله از سه جهت دیگر را 50% در نظر می‌گیرد. همان پاراگراف قبلی را به دو روش زیر و با استفاده از تگ margin می‌توان به وسط صفحه منتقل کرد.

<p style="width: 200px;margin: 10px 50% 5px 50%">7Learn.com</p>
<p style="width: 200px;margin: 0 auto">7Learn.com</p>

برای وسط چین کردن جدول و تگ div که در بالا به چپ و راست شناور شده بود، می‌توانیم به این شکل عمل کنیم:

ضمنا بر اساس طراحی خود، می‌توانید به جای 50% از دو طرف، از یک طرف مثلا 30% و از طرف دیگر 70% فاصله داد. در این حالت شئ مورد نظر شما به آن سمت که %30 فاصله دارد متمایل می‌شود. امیدواریم که این مقاله برایتان مفید بوده باشد. اگر تجربه‌ای در برنامه نویسی HTML و CSS دارید، تجربیات خود را از به کار گرفتن این 4 روش با ما در میان بگذارید.

اگر به یادگیری بیشتر در زمینه HTML ,CSS و طراحی وب علاقه مند هستی با شرکت در دوره آموزش طراحی سایت، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه و کسب درآمد هستی.

فرصت های بزرگ و درآمدهای عالی متعلق به متخصص هاست. برای متخصص شدن، مشاوره رایگان بگیر: