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

دسته بندی: برنامه نویسی
سطح مقاله: ساده
زمان مطالعه: 9 دقیقه
۲۱ بهمن ۱۳۹۰

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

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

نظرات کاربران

hesam

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

لقمان آوند
&lt;div style=&quot;text-align:center;&quot;&gt;
   &lt;img src=&quot;img1.jpg&quot;&gt; &amp;nbsp; 
   &lt;img src=&quot;img2.jpg&quot;&gt;
&lt;/div&gt;
مجتبی

thank you so much

کیا

با درود بی کران
به کارتان ادامه دهید فرزند سرزمین کورش.

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

بدرود

7alma

سلام
مشکل بنده حل شد
با استفاده از مطالب شما
با تشکر بسیار 🙄

mohammad

با تشکر از ویبلاگ خوب تون من خیلی مشکلاتام حل شد

مجید

من برای راست چین کردن مشکل ظاهرا بزرگی داشتم و از روش دوم استفاده کردم (گزینه ی آخر) استفاده کردم. مشکلم هم حل شد.
ممنونم ازت

hk_register

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

با سپاس

میلاد حیدری

مثل :

&lt;form&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;/form&gt;

به همین راحتی!

hk_register

این طوری که دوتا textBox پشت هم میاد. من میخوام یک textBox بعد از یه متنی که با پاراگراف زدیم بیاد.

میلاد حیدری

این کار برای تگ های پاراگرافیک ، div، هدر ها ، غیر ممکن است!

hk_register

آها، ok . پس چطوری میشه همچین چیزی نوشت؟ مثلا: بنویسید “نام کاربری” و جلوش یک تکست باکس بیاد !

ممنون از راهنماییتون.

میلاد حیدری
username:&lt;input type=&quot;text/&quot;&gt;
hk_register

درود.
با سپاس از سایت خوبتان.
من می خوام یه textBox رو در کد html ، به سمت راست صفحه ببرم.(دقت کنید که به متن داخلش کاری ندارم، بلکه خود تکست باکس). لطفا راهنمایی کنید.
با سپاس

میلاد حیدری

یک div ایجاد کنید سپس direction آن را rtl کنید!!!!

alireza

خسته نباشید…من الان دوتا divدارم میخوام divی که در داخل divپدرش هست رو فاصله ی بالاش و مثلا 5px از div پدرش باشه.ولی جفتشون باهم میان پایین!!!! امیدوارم متوجه مشکلم شده باشید…باید چیکار کنم؟

لقمان آوند

برای div درونی از ویژگی margin-top:5px در css استفاده کن .

alireza

آموزشات فوق العادست

رسول

سلام
من متن رو خوندم ولی اخر نفهمیدم باید چچیکار کنم
مشکل من این می خوام مثلا یه اسلایدر که تو سایت وردپرس با یه کد مثلا

&lt;?php tinyslider(); ?&gt;

در ابزار ها و یا تو خود قالب نمایش بدم
حالا مشکل اینه میخوام مثلا این اسلاید که توسط این کد نمایش داده میشه رو بیارم وسط اما نمیشه
تقریبا تمام روش ها رو امتحان کردم ولی چون با css آشنایی کردم دارم شاید به صورت اشتبا بوده الان من باید چیکار کن ؟

لقمان آوند

خوب باید css و کدخونی خوب بلد باشی …

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل