• مشکی
  • سفید
  • سبز
  • آبی
  • قرمز
  • نارنجی
  • بنفش
  • طلایی
انجمن ها > انجمن گرافیک > صفحه اول بحث
لطفا در سایت شناسائی شوید!
گرافیک (بازدید: 883)
سه شنبه 10/5/1391 - 2:47 -0 تشکر 486058
راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات

خیلی از دوستان در سوال های مطرح شده پرسیده بودند که چطور عکس ، متن و یا شئ خاصی رو در صفحه وب به وسط بیارند و چینش افقی اونو وسطچین کنند . امروز در این پست به صورت کامل و مفصل در مورد چینش افقی انواع متن ، عکس و اشیاء در صفحات 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

برو به انجمن
انجمن فعال در هفته گذشته
مدیر فعال در هفته گذشته
آخرین مطالب
  • آلبوم تصاویر بازدید از کلیسای جلفای...
    آلبوم تصاویر بازدید اعضای انجمن نصف جهان از کلیسای جلفای اصفهان.
  • بازدید از زیباترین کلیسای جلفای اصفهان
    جمعی از کاربران انجمن نصف جهان، در روز 27 مردادماه با همکاری دفتر تبیان اصفهان، بازدیدی را از کلیسای وانک، به عمل آورده‌اند. این کلیسا، یکی از کلیساهای تاریخی اصفهان به شمار می‌رود.
  • اعضای انجمن در خانه شهید بهشتی
    خانه پدری آیت الله دکتر بهشتی در اصفهان، امروزه به نام موزه و خانه فرهنگ شهید نام‌گذاری شده است. اعضای انجمن نصف جهان، در بازدید دیگر خود، قدم به خانه شهید بهشتی گذاشته‌اند.
  • اطلاعیه برندگان جشنواره انجمن‌ها
    پس از دو ماه رقابت فشرده بین کاربران فعال انجمن‌ها، جشنواره تابستان 92 با برگزاری 5 مسابقه متنوع در تاریخ 15 مهرماه به پایان رسید و هم‌اینک، زمان اعلام برندگان نهایی این مسابقات فرارسیده است.
  • نصف جهانی‌ها در مقبره علامه مجلسی
    اعضای انجمن نصف جهان، در یك گردهمایی دیگر، از آرامگاه علامه مجلسی و میدان احیا شده‌ی امام علی (ع) اصفهان، بازدیدی را به عمل آوردند.