تبیان، دستیار زندگی

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

:: اول از همه بزارید در یک دسته بندی کلی تگ ها . المان های html رو به دوبخش تقسیم کنیم :

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

:: تگ ها و المان های بلاکی فرقشون با بقیه اینه که به صورت ضمنی قبل و بعدشون یک خط جدید ایجاد میشه . در واقع یعنی یک خط کامل رو در بر میگرین و پهناشون ۱۰۰ درصد هست . المان های بلاکی شامل پاراگراف ها ، لیست ها ، جدول ها ، فرم ها و هدینگها هستند .

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

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

در این روش از تگ center که در ورژن های قدیمی html وجود داشت استفاده میشه . بعد از ورود CSS دیگه از این تگ استفاده نمیشه . البته هنوز مرورگرها اونو support می کنن ولی به احتمال زیاد در نسخه های آینده برای استاندارد سازی صفحات وب این سری از تگ های 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) رو بگیره . مقدار پیشفرض ویژگی dir هم که ltr هست ، یعنی مخصوص زبان هایی مثل انگلیسی .

:: چهار تا پاراگرافی که در زیر آوردم رو به صورت مثال می تونید ببینید . متن درون هر پاراگراف توضیح چینش همون پاراگراف هست :

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

در تگ p اگر ویژگی align و dir آورده نشه ، مقدار پیشفرضی که گفتیم (left و ltr) براش در نظر گرفته میشه !

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

امروزه دیگه سعی می شه تمامی خصوصیات و شیوه ی نمایش تگ ها رو با استفاده از CSS تنظیم کنند و شدیدا توصیه می شه که شما هم همین کارو انجان بدید . حتی برای پاراگراف ها !

:: ویژگی text-align در CSS دقیقا همون کار ویژگی align در پاراگراف ها رو انجام میده . همون مقادیر رو هم میتونه بپذیره . به جای ویژگی dir در تگ p هم یک ویژگی به نام direction در CSS وجود داره که این ویژگی هم مثل dir می تونه دو مقدار ltr و rtl رو بپذیره.

خوبی استفاده از ویژگی های CSS اینه که دیگه فقط مختص تگ p نیست و شما در هر تگی که این ویژگی ها رو به صورت CSS بکار ببرید ، میشه چینش محتوای درون اون تگ رو تعیین کرد .

همون چهار تا پاراگراف بالایی رو که با استفاده از ویژگی های 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 پیشنهاد می کنم حتما مطلب شیوه های مختلف استفاده از CSS در صفحات html و Syntax و قواعد نوشتاری زبان CSS رو بخونید) .
:: برای تعیین چپنش افقی عکس ها ، می تونید اون رو درون یک تگ پاراگراف که چینش رو براش تعیین کردید استفاده کنید .

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

معمولا دوستانی که در مورد چینش اشیاء مشکل داشتند ، بیشتر در مورد چینش جدول ها و تقسیم بندی های صفحه (تگ div) سوال می پرسیدند . در اینجا می خوایم روش درست و استاندارد انجام این کار رو براتون بگیم .

روش غیراستاندارد و غیر معمولی که بکار میره اینه که جدول ها و المان های بلاکی رو درون یک تگ دیگه قرار میدند و چینش تگ پدر رو تعیین می کنند تا محتوای درون اون رو به راست ، چپ یا وسط ببرند . این روش نادرسته و در بعضی از مرورگر ها پشتیبانی نمیشه .

:: برای این منظور باید از ویژگی های CSS برای همون تگی که می خوایم چینشش رو تعیین کنیم ، استفاده کنیم . برای راست چین و چپ چین کردن یک المان بلاکی باید از ویژگی float در CSS که به معنی شناور بودن هست در خود تگ استفاده کنیم . ویژگی float دو مقدار left و right رو می پذیره که باعث شناور شدن المان بلاکی در چپ یا راست میشه . به طور مثال در کدهای زیر جدول آورده شده به سمت راست صفحه منتقل میشه (محتواش راست چین نمیشه ، خودش به راست میره) و تگ 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>

در المان های بلاکی به صورت پیش فرض پهنای المان ۱۰۰ درصد هست . برای همین من با استفاده از ویژگی width مقدار ۲۰۰ پیکسل رو برای پهنای تگ جدول و div فوق تعیین کردم تا به چپ و راست رفتنشون مشخص باشه .

:: روش مرسوم و صحیح وسط چین کردن المان های بلاکی استفاده از ویژگی margin در CSS هست . ویژگی margin فاصله ی حاشیه ی یک تگ تا تگ پدرش (تگی که اون رو در بر داره) رو مشخص میکنه . شاید تعجب کرده باشید که چطور و چرا از این تگ برای وسط چین کردن المان بلاکی استفاده میشه ! خوب وقتی شما این فاصله رو از چپ و راست مقدار ۵۰ درصد قرار بدید ، در واقع یعنی اونو در وسط قرار دادید !

:: چون قصد دارم در آینده در مورد ویژگی margin و دو ویژگی padding و border در CSS یک مطلب مفصل بنویسم و تفاوت و کاربردهاشون رو بگم در اینجا مختصرا در مورد margin توضیح میدم . تگ margin چهار مقدار رو که با یک space از هم جدا میشن ، می پذیره که به ترتیب فاصله از بالا ، راست ، پایین و چپ تگ رو مشخص می کنه . به طور مثال در پاراگراف زیر فاصله از بالای پاراگراف ۱۰ پیکسل ، از راست ۷ پیکسل از پایین ۵ پیکسل و از چپ ۳ پیکسل هستش :

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

همونطور که گفتم شما میتونید به جای واحد pixel از درصد استفاده کنید . با قرار دادن مقدار ۵۰ درصد برای فاصله از چپ و راست ، المان رو به وسط میارید . همچنین برای انتقال یک المان بلاکی به وسط ، مرسوم هست که در تگ margin برای فاصله از بالا یک مقدار رو تعیین می کنند و به جای سه مقدار دیگه از کلمه ی auto استفاده می کنند . که اینکار به صورت پیشفرض فاصله از سه سمت دیگه رو ۵۰% در نظر میگیره .
همون تگ پاراگراف فوق رو با یکی از دو شیوه ی زیر با استفاده از تگ margin میشه به وسط منتقل کرد :

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

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

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

<table style="width: 200px;margin: 10px 50% 5px 50%;">
<tr>
<td>7Learn.com Web Tutorials</td>
</tr>
</table>
<div style="width: 200px;margin: 5px auto">7Learn.com Web Tutorials</div>

:: ضمنا بر اساس طراحی تون می تونید به جای ۵۰ درصد از دو طرف ، از یک طرف مثلا ۳۰ درصد و از طرف دیگه ۷۰ درصد فاصله بدید . در این حالت شئ مورد نظر به سمتی که %۳۰ فاصله دادید مایل میشه !
امیدوارم که این مقاله هم بدردتون خورده باشه . برای دریافت مطالب دیگه یادتون نره مشترک فید ما بشید ، یا اینکه از باکس نارنجی رنگ زیر اشتراک ایمیلی بگیرید .

www.7learn.com