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

لینک به css چیست

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

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۳۳ دیدگاه
hesam ۲۷ خرداد ۱۳۹۲، ۲۳:۴۷
آقا سلام.
خسته نباشيد.
من تازه كارم.
ميخوام تو يه صفحه 2تا عكس وسط و كنار هم باشن
يعني از گوشه ها فاصله داشته باشن و وسط صفحه باشن
از پاسختون پيشاپيش ممنونم...
لقمان آوند ۲۸ خرداد ۱۳۹۲، ۰۰:۳۰
[cc]
<div style="text-align:center;">
<img src="img1.jpg"> &nbsp;
<img src="img2.jpg">
</div>
[/cc]
مجتبی ۲۴ اردیبهشت ۱۳۹۲، ۱۹:۳۹
thank you so much
کیا ۲۱ فروردین ۱۳۹۲، ۲۳:۰۸
با درود بی کران
به کارتان ادامه دهید فرزند سرزمین کورش.

آموزش کار بزرگانست.

بدرود
7alma ۰۸ فروردین ۱۳۹۲، ۰۱:۳۱
سلام
مشکل بنده حل شد
با استفاده از مطالب شما
با تشکر بسیار :roll:
mohammad ۰۲ اسفند ۱۳۹۱، ۲۰:۰۴
با تشکر از ویبلاگ خوب تون من خیلی مشکلاتام حل شد
مجید ۰۵ مهر ۱۳۹۱، ۲۳:۵۵
من برای راست چین کردن مشکل ظاهرا بزرگی داشتم و از روش دوم استفاده کردم (گزینه ی آخر) استفاده کردم. مشکلم هم حل شد.
ممنونم ازت
hk_register ۲۰ شهریور ۱۳۹۱، ۲۲:۲۸
آقا ممنون از راهنماییتون. یک سوال دیگه: چطور میشه از رفتن به خط بعد، بعد از دستور پاراگراف جلوگیری کرد؟ مثلا بشه یک تکست باکس رو درست بعد از یک تکست اضافه کنیم.

با سپاس
میلاد حیدری ۲۱ شهریور ۱۳۹۱، ۰۲:۲۶
مثل :

[cc]
<form>
<input type="text">
<input type="text">
</form>
[/cc]

به همین راحتی!
hk_register ۲۰ شهریور ۱۳۹۱، ۲۱:۰۹
درود.
با سپاس از سایت خوبتان.
من می خوام یه textBox رو در کد html ، به سمت راست صفحه ببرم.(دقت کنید که به متن داخلش کاری ندارم، بلکه خود تکست باکس). لطفا راهنمایی کنید.
با سپاس
میلاد حیدری ۲۰ شهریور ۱۳۹۱، ۲۱:۵۵
یک div ایجاد کنید سپس direction آن را rtl کنید!!!!
alireza ۲۷ مرداد ۱۳۹۱، ۱۸:۴۶


خسته نباشید...من الان دوتا divدارم میخوام divی که در داخل divپدرش هست رو فاصله ی بالاش و مثلا 5px از div پدرش باشه.ولی جفتشون باهم میان پایین!!!! امیدوارم متوجه مشکلم شده باشید...باید چیکار کنم؟
لقمان آوند ۲۷ مرداد ۱۳۹۱، ۱۹:۴۹
برای div درونی از ویژگی margin-top:5px در css استفاده کن .
alireza ۲۷ مرداد ۱۳۹۱، ۱۸:۳۰
آموزشات فوق العادست
رسول ۰۹ مرداد ۱۳۹۱، ۱۶:۵۱
سلام
من متن رو خوندم ولی اخر نفهمیدم باید چچیکار کنم
مشکل من این می خوام مثلا یه اسلایدر که تو سایت وردپرس با یه کد مثلا

[cc]
<?php tinyslider(); ?>
[/cc]

در ابزار ها و یا تو خود قالب نمایش بدم
حالا مشکل اینه میخوام مثلا این اسلاید که توسط این کد نمایش داده میشه رو بیارم وسط اما نمیشه
تقریبا تمام روش ها رو امتحان کردم ولی چون با css آشنایی کردم دارم شاید به صورت اشتبا بوده الان من باید چیکار کن ؟
لقمان آوند ۰۹ مرداد ۱۳۹۱، ۲۳:۴۴
خوب باید css و کدخونی خوب بلد باشی ...
پوریا ۲۳ تیر ۱۳۹۱، ۱۷:۰۰
با سلام خدمتتون یه سوال:تو وبلاگ ها برای راست چین کردن منوها چگونه باید عمل کرد؟منظور از از منوها (لوگو وارشیوو.......)هستش
لقمان آوند ۲۳ تیر ۱۳۹۱، ۱۸:۱۱
از مشخصه های direction:rtl و text-align:right در css استفاده کنید .
سجاد ۰۲ تیر ۱۳۹۱، ۱۲:۰۰
سلام خسته نباشید

اگه بخوایم برای یک باکس یا تصویر در استایل کلاس تعریف کنیم و از استایل باکس رو کنترل کنیمو وسط چین کنیم باید از margin استفاده کنیم ولی مشکلی که هست اینه که تو مانیتور های مختلف مکان باکس تغییر میکنه ! برای حل این مشکل پیشنهادتون چیه؟
لقمان آوند ۰۷ تیر ۱۳۹۱، ۱۱:۰۹
سلام
شما اگه margin:0 auto رو استفاده کنید در هر مانیتوری باکس وسط قرار میگیره ! و چنین مشکلی وجود نداره !
vahid2451 ۱۵ خرداد ۱۳۹۱، ۰۶:۲۳
سلام
مشکل بنده حل شد
با استفاده از مطالب شما
با تشکر بسیار
:oops:
لقمان آوند ۱۵ خرداد ۱۳۹۱، ۰۹:۰۲
بسيار خوب
موفق باشيد
vahid2451 ۱۴ خرداد ۱۳۹۱، ۱۳:۵۳
سلام
با روشی که شما فرمودین من تونستم هدر - منو و نوشته ها رو وسط چین کنم اما سایدبارها به هم ریختن
میشه بفرمایید که چیکار باید بکنم؟
سی اس اس هم که در دسترستون هست:
http://selm.ir/

با تشکر بسیار
ممنون
لقمان آوند ۱۴ خرداد ۱۳۹۱، ۱۴:۰۵
سلام
احتمالا تغیراتی که در کلاس های CSS دادید بین اجزای دیگه ای هم در صفحه وب شما مشترک بوده . سعی کنید برای چنین تغیراتی کلاس جداگانه تعریف کنید و اونو به تگ های دلخواه اضافه کنید .
pirooz ۲۲ اردیبهشت ۱۳۹۱، ۲۳:۱۲
سلام
شيوه چهارم فقط در فايرفاكس جواب ميده و در IE‌ وسط چين نميشه :(
لقمان آوند ۲۳ اردیبهشت ۱۳۹۱، ۰۶:۴۲
در IE8 و IE9 مشکلی نداره . در IE های قدیمیتر ممکنه جواب نده . برای همین بهتره از تگ center هم در کنار margin استفاده کنید تا همه رو ساپ.رت کرده باشید .
مهیار نظری پور ۰۱ اسفند ۱۳۹۰، ۰۸:۰۶
درود بر شما
در ادیتورهای انجمن ساز وی بولتین، هر سه حالت چپ چین و راست چین و وسط چین وجود داره، ولی حالت Justify Full وجود نداره..
بنده، بواقع به این امکان در ادیتور، نیازمند می باشم..
در صورت امکان؛ بفرمائید راه حلّی دارد یا خیر.
سپاس
مهیار نظری پور
مدیرکلّ دردونه
لقمان آوند ۰۱ اسفند ۱۳۹۰، ۱۴:۵۶
سلام
در صورتی که ادیتور ویرایشگر html داره باید کد html مطلب ارسالی رو تغیر بدید . و اگر از bbCode ها استفاده میشه من آشنایی چندانی باهاشون ندارم .