۵۳ دیدگاه نظر محمد انوری
آموزش راست چين كردن قالب html
آموزش راست چين كردن قالب html

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

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

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

بیشتر بخوانید: HTML چیست و چه کاربردی دارد؟ توضیح مفاهیم همراه با مثال

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

۵۳ دیدگاه
ما همه سوالات و دیدگاه‌ها رو می‌خونیم و پاسخ میدیم
۰۲ مرداد ۱۴۰۲، ۲۱:۴۴

سلام.ازچه سایتهایی میتونم قالب خارجی برای راستچین کردن وتمرین تهیه کنم ؟مرجع مشخصی وجودداره؟

نازنین کریمی مقدم ۱۹ شهریور ۱۴۰۲، ۰۹:۴۹

درود در سایتهای داخلی ژاکت یکی از نمونه هایی هست که داره همین کار رو میکنه و قالب رو برای فروش میگذاره. در سایتهای خارجی <a href="https://themeforest.net/search/fitness%20html" target="_blank" rel="noopener nofollow ugc">themeforest </a>و <a href="https://themewagon.com/themes/" rel="nofollow ugc">themewagon </a>از گزینه‌های مناسب هستند.

۱۲ اسفند ۱۴۰۱، ۱۷:۰۷

سلام خسته نباشید ممنونم از جوابتون هیلی ممنون

۱۶ بهمن ۱۴۰۱، ۱۳:۲۸

سلام خسته نباشید عه عزیزم من منظورم رو با فلش توی عکس زیر بهتون توضیح دادم ک منظورم چیه منظورم همین عکس هایی هست ک در تصویر زیر فلش زدم ممنون میشم کمی راهنمایی کنید ک از چ کدی استفاده کنم ممنونم https://s27.picofile.com/file/8459477592/Untitled_1.jpg

نازنین کریمی مقدم ۲۷ بهمن ۱۴۰۱، ۰۰:۳۳

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

۱۶ بهمن ۱۴۰۱، ۱۳:۱۷

سلام خسته نباشید اوکی چشم براتون با عکس منظورمو در کامنت بعدی توضیح می‌دم ممنونم

۰۴ بهمن ۱۴۰۱، ۱۴:۵۲

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

نازنین کریمی مقدم ۰۸ بهمن ۱۴۰۱، ۰۵:۴۶

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

۳۰ دی ۱۴۰۱، ۲۳:۱۷

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

نازنین کریمی مقدم ۰۱ بهمن ۱۴۰۱، ۰۶:۲۵

درود برای بخش دوم از width:100% استفاده کنید تا تمام پهنا رو بگیره. اگر عمل نکرد در کنار width حالات مختلف display رو هم چک کنید. !important فراموش نشه. برقرار باشید.

۲۹ آذر ۱۴۰۱، ۱۲:۱۰

سلام خسته نباشید کد رو ک اینجا نمی‌تونم بفرستم ولی می‌تونم توی ایمیل یا توی تلگرام بفرستم چیکار کنم ایمیل بهتره یا تلگرام ؟اینجا هم می‌تونم بفرستم ولی نباید تاییدش کنید کامنتمو ممنونم منتظر پاسختون هستم

نازنین کریمی مقدم ۰۳ دی ۱۴۰۱، ۱۰:۲۲

درود در یک فضای ابری مثل کدپن یا گوگل درایو آپلود کنید و لینکش رو بفرستید. اون لینک رو تایید نخواهیم کرد و بررسی میکنیم.

۱۴ آذر ۱۴۰۱، ۰۹:۲۲

سلام جناب خسته نباشید شرمنده مزاحم میشم من ی مشکلی در برنامه نویسی html داشتم ک اگ میشه بپرسم عه جناب من ی کدی دارم ک این کد منوی سمت راستش وقتی عکس پس زمینه می‌گذارم در منوی سمت راستش پس زمینه منو از دو طرف یا بالا یا پایین میزنه بیرون ممنون میشم بگین چیکار کنم ک درست شه ممنون میشم پاسخ بدین اگر هم بخواین کد رو براتون می‌فرستم امیدوارم متوجه سوالم شده باشین اگر نشدین بگین تا عکسشو بفرستم

نازنین کریمی مقدم ۱۵ آذر ۱۴۰۱، ۱۳:۱۳

درود کدتون رو در یک کدپن آپلود کنید و آدرسش رو اینجا بفرستید تا بتونم کمک تون کنم.

۰۴ خرداد ۱۴۰۱، ۱۰:۵۷

من یع دکمه ایجاد کردم و با همون تگ باتن و میخوام ببرمش سمت چپ هدرم ولی هر چی دایرکشن لفت و flot و هر چی بگین امتحان کردم ولی فقط نوشته توش میره اون باکسش همونجا مونده

نازنین کریمی مقدم ۰۴ خرداد ۱۴۰۱، ۱۱:۵۰

درود بی زحمت کدتون رو در یک کدپن آپلود کرده و آدرسش رو اینجا بگذارید تا بتونم بررسی کنم.

۰۶ فروردین ۱۴۰۱، ۱۲:۵۳

ببخشید چطور میشه تو وبلاگ بلاگفا چت باکس درست کرد؟؟

نازنین کریمی مقدم ۰۹ فروردین ۱۴۰۱، ۱۴:۵۹

درود من خیلی وقته از بلاگفا استفاده نمیکنم و اطلاعات دقیقی ندارم

۰۶ فروردین ۱۴۰۱، ۱۲:۵۱

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

نازنین کریمی مقدم ۰۹ فروردین ۱۴۰۱، ۱۴:۳۷

درود راه‌های خیلی زیادی برای اینکار وجود داره. برای مثال میتونید از float استفاده کنید یا از <a href="https://www.w3schools.com/css/css_positioning.asp" target="_blank" rel="noopener nofollow ugc">این لینک</a> کمک بگیرید.

hesam ۲۷ خرداد ۱۳۹۲، ۱۹:۱۷

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

لقمان آوند ۲۷ خرداد ۱۳۹۲، ۲۰:۰۰

[cc] &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; [/cc]

مجتبی ۲۴ اردیبهشت ۱۳۹۲، ۱۵:۰۹

thank you so much

کیا ۲۱ فروردین ۱۳۹۲، ۱۸:۳۸

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

7alma ۰۷ فروردین ۱۳۹۲، ۲۱:۰۱

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

mohammad ۰۲ اسفند ۱۳۹۱، ۱۶:۳۴

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

مجید ۰۵ مهر ۱۳۹۱، ۲۰:۲۵

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

hk_register ۲۰ شهریور ۱۳۹۱، ۱۷:۵۸

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

میلاد حیدری ۲۰ شهریور ۱۳۹۱، ۲۱:۵۶

مثل : [cc] &lt;form&gt; &lt;input type=&quot;text&quot;&gt; &lt;input type=&quot;text&quot;&gt; &lt;/form&gt; [/cc] به همین راحتی!

hk_register ۲۱ شهریور ۱۳۹۱، ۱۶:۴۳

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

میلاد حیدری ۲۱ شهریور ۱۳۹۱، ۱۷:۰۹

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

hk_register ۲۴ شهریور ۱۳۹۱، ۱۳:۱۳

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

میلاد حیدری ۲۴ شهریور ۱۳۹۱، ۱۶:۵۴

[cc] username:&lt;input type=&quot;text/&quot;&gt; [/cc]

hk_register ۲۰ شهریور ۱۳۹۱، ۱۶:۳۹

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

میلاد حیدری ۲۰ شهریور ۱۳۹۱، ۱۷:۲۵

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

alireza ۲۷ مرداد ۱۳۹۱، ۱۴:۱۶

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

لقمان آوند ۲۷ مرداد ۱۳۹۱، ۱۵:۱۹

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

alireza ۲۷ مرداد ۱۳۹۱، ۱۴:۰۰

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

رسول ۰۹ مرداد ۱۳۹۱، ۱۲:۲۱

سلام من متن رو خوندم ولی اخر نفهمیدم باید چچیکار کنم مشکل من این می‌خوام مثلا یه اسلایدر که تو سایت وردپرس با یه کد مثلا [cc] &lt;?php tinyslider(); ?&gt; [/cc] در ابزار‌ها و یا تو خود قالب نمایش بدم حالا مشکل اینه میخوام مثلا این اسلاید که توسط این کد نمایش داده میشه رو بیارم وسط اما نمیشه تقریبا تمام روش‌ها رو امتحان کردم ولی چون با css آشنایی کردم دارم شاید به صورت اشتبا بوده الان من باید چیکار کن ؟

لقمان آوند ۰۹ مرداد ۱۳۹۱، ۱۹:۱۴

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

پوریا ۲۳ تیر ۱۳۹۱، ۱۲:۳۰

با سلام خدمتتون یه سوال:تو وبلاگ‌ها برای راست چین کردن منوها چگونه باید عمل کرد؟منظور از از منوها (لوگو وارشیوو.......)هستش

لقمان آوند ۲۳ تیر ۱۳۹۱، ۱۳:۴۱

از مشخصه‌های direction:rtl و text-align:right در css استفاده کنید .

سجاد ۰۲ تیر ۱۳۹۱، ۰۷:۳۰

سلام خسته نباشید اگه بخوایم برای یک باکس یا تصویر در استایل کلاس تعریف کنیم و از استایل باکس رو کنترل کنیمو وسط چین کنیم باید از margin استفاده کنیم ولی مشکلی که هست اینه که تو مانیتور‌های مختلف مکان باکس تغییر میکنه ! برای حل این مشکل پیشنهادتون چیه؟

لقمان آوند ۰۷ تیر ۱۳۹۱، ۰۶:۳۹

سلام شما اگه margin:0 auto رو استفاده کنید در هر مانیتوری باکس وسط قرار میگیره ! و چنین مشکلی وجود نداره !

vahid2451 ۱۵ خرداد ۱۳۹۱، ۰۱:۵۳

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

لقمان آوند ۱۵ خرداد ۱۳۹۱، ۰۴:۳۲

بسيار خوب موفق باشيد

vahid2451 ۱۴ خرداد ۱۳۹۱، ۰۹:۲۳

سلام با روشی که شما فرمودین من تونستم هدر - منو و نوشته‌ها رو وسط چین کنم اما سایدبارها به هم ریختن میشه بفرمایید که چیکار باید بکنم؟ سی اس اس هم که در دسترستون هست: http://selm.ir/ با تشکر بسیار ممنون

لقمان آوند ۱۴ خرداد ۱۳۹۱، ۰۹:۳۵

سلام احتمالا تغیراتی که در کلاس‌های CSS دادید بین اجزای دیگه ای هم در صفحه وب شما مشترک بوده . سعی کنید برای چنین تغیراتی کلاس جداگانه تعریف کنید و اونو به تگ‌های دلخواه اضافه کنید .

vahid2451 ۱۴ خرداد ۱۳۹۱، ۱۶:۱۷

اگه میشه بیشتر توضیح بدین الان من تغییرات دیگه ای دادم اگه میشه ببینید الان سه قسمت مین ، ساید راست و چپ هر کدوم فلوت رایت دارن اینو چیکار کنم که وسط بیان؟ مرگین آئتو هم میذارم به هم میریزه همچنین درصد هم جواب نمیده البته من برای هر سه یک چیز میذارم اگه ممکنه کمک کنید با تشکر :oops:

pirooz ۲۲ اردیبهشت ۱۳۹۱، ۱۸:۴۲

سلام شيوه چهارم فقط در فايرفاكس جواب ميده و در IE‌ وسط چين نميشه :(

لقمان آوند ۲۳ اردیبهشت ۱۳۹۱، ۰۲:۱۲

در IE8 و IE9 مشکلی نداره . در IE‌های قدیمیتر ممکنه جواب نده . برای همین بهتره از تگ center هم در کنار margin استفاده کنید تا همه رو ساپ.رت کرده باشید .

مهیار نظری پور ۰۱ اسفند ۱۳۹۰، ۰۴:۳۶

درود بر شما در ادیتورهای انجمن ساز وی بولتین، هر سه حالت چپ چین و راست چین و وسط چین وجود داره، ولی حالت Justify Full وجود نداره.. بنده، بواقع به این امکان در ادیتور، نیازمند می‌باشم.. در صورت امکان؛ بفرمائید راه حلّی دارد یا خیر. سپاس مهیار نظری پور مدیرکلّ دردونه

لقمان آوند ۰۱ اسفند ۱۳۹۰، ۱۱:۲۶

سلام در صورتی که ادیتور ویرایشگر html داره باید کد html مطلب ارسالی رو تغیر بدید . و اگر از bbCode‌ها استفاده میشه من آشنایی چندانی باهاشون ندارم .

  • روش اول: وسط چین کردن قالب html ( کهنه و منسوخ شده )
  • روش دوم : تعیین موقعیت افقی محتوای پاراگراف در html با استفاده از ویژگی align در تگ <p>
  • روش سوم : استفاده از CSS برای تعیین موقعیت افقی محتوای تگ ها
  • روش چهارم : استفاده از CSS برای تعیین موقعیت افقی المان‌های بلاکی مثل جدول‌ها و تقسیم بندی‌های صفحه (تگ div)
اشتراک گذاری مقاله در :