جهت ورود به تالار گفتمان سایت کلیک کنید


ترفند های وسط چین کردن انواع تگ های Html

یکی از مسائل مهم و گیج کننده برای بعضی از طراحان وب سایت , موضوع وسط چین کردن تگ های html به بهترین نحو ممکن می باشد .

راه های بسیار زیادی در این ضمینه گفته میشود که بعضی از آنها قدیمی و منسوخ شده و بعضی از آنها غیر استاندارد می باشد . سعی دارم در این پست بهترین روش های وسط چین کردن تگ ها رو برای شما عزیزان آموزش دهم .

توجه فرمایید که بنده در این پست فقط راه های استاندارد رو بیان میکنم …

ترفند های وسط چین کردن انواع تگ های Html

ترفند 1 : برای وسط چین کردن تگ های نوشتاری ( از جمله p,b,u,i,h1,h2,h3,h4,h5,h6 و … ) , کافیست در css به آن text-align:center دهیم .

<p style="text-align:center">Vahid Majidi</p>

ترفند 2 : برای وسط چین کردن تگ های Inline Level ( از جمله img,label,input,video,audio و … ) , کافیست آنها را در داخل تگ p ( پاراگراف ) انداخته و به تگ پاراگراف text-align:center دهیم .

<p style="text-align:center"><img src="vms.jpg" alt="Vahid Majidi"></p>

 ترفند 3 : برای وسط چین کردن تگ های Block Level ( از جمله div,table,hr و … ) , کافیست در Css ابتدا به آنها یک width مشخص داده , سپس margin-left و margin-right آن را Auto قرار دهیم .

<div style="width:200px;margin-left:auto;margin-right:auto">
    Vahid Majidi
</div>

 نکته 1 : اگر با اصطلاحات Block Level و Inline Level آشنایی ندارید , اینجا کلیک کنید .

نکته 2 : ترفند های بالا فقط قادر به وسط چین کردن در حالت افقی هستند و هنور راح حل مناسبی برای وسط چین کردن در حالت عمودی در طراحی وب معرفی نشده است بجز ترفند زیر …

ترفند 4 : در این ترفند هم قادر به وسط چین کردن در حالت افقی میباشید و هم در حالت عمودی …

به این ترتیب که شما میتوانید با دادن یک position به تگ مورد نظر و انجام مراحل زیر این کار را انجام دهید .

ابتدا یکی از مقادیر fixed , relative و یا absolute را انتخاب نموده که هر کدام کار خاصی را انجام میدند . مثلا اگر fixed را انتخاب نمایید , تگ شما در صفحه مرورگر ثابت و بی حرکت میشود . ( ترجیحا absolute استفاده نمایید )

حال اگر میخواهید به صورت افقی وسط چین نمایید , کافیست مقدار پراپرتی left را %50 انتخاب کرده , سپس margin-left را به مقدار نصف width تگ مورد نظر اما به صورت منفی مقدار دهی نمایید .

<div style="width:400px;position:absolute;left:50%;margin-left:-200px">
    Vahid Majidi
</div>

و یا اگر میخواهید به صورت عمودی وسط چین نمایید , کافیست مقدار پراپرتی top را %50 انتخاب کرده , سپس margin-top را به مقدار نصف height تگ مورد نظر اما به صورت منفی مقدار دهی نمایید .

<div style="height:400px;position:absolute;top:50%;margin-top:-200px">
    Vahid Majidi
</div>

 نکته 1 : ما اکثرا سایت را بر اساس پراپرتی Float در css میسازیم . به همین دلیل استفاده نادرست و کم دقتی در ترفند شماره 4 , میتواند دیزاین سایت را بهم ریخته و مشکلاتی پدید آورد .

نکته 2 : استفاده از تگ هایی مانند center و یا خاصیت align در html , منسوخ شده و 4 روش بالا بهترین روش ها برای وسط چین کردن میباشند .

نکته 3 : سعی کنید برای وسط چین کردن در حالت عمودی , به صورت چشمی و تجربی با دادن پراپرتی margin-top به تگ مورد نظر کار خود را انجام دهید و کمتر از ترفند 4 برای این کار استفاده نمایید ( مگر اینکه آشنایی کامل با Position ها داشته باشید ) .

آموزش : وحید مجیدی

پخش اختصاصی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

12 پاسخ به “ترفند های وسط چین کردن انواع تگ های Html”

  1. رضا گفت:

    عالی بود. ممنونم.

  2. سالار گفت:

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

    اگه یه سایت با نسخه های ویژال استودیو و اسکیول سرور2012 ساخته بشه

    روی ورژن های دیگه این دو نرم افزار جواب میده؟؟ممنون

    • وحید مجیدی صدر گفت:

      سلام دوست عزیزم

      متاسفانه بنده فقط php کار هستم و اطلاعاتی از asp.net ندارم

      میتونید توی فروم بیان کنید

  3. وحید پهلوانی گفت:

    سلام. یکی از بزرگترین دغدغه های سایتم حل شد. ممنون عزیز

  4. سالار گفت:

    سلام سایتتون واقعا عالیه

    یه سوالی داشتم

    برای وسط چین کردن کنترل گرید ویو چیکار باید کرد؟؟ ممنونم

  5. حمید گفت:

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

    • وحید مجیدی صدر گفت:

      سلام دوست عزیزم . لطفا در تالار گفتمان وب سایت تاپیک بزنید

      ضمنا وب سایتتون رو هم بفرمایید اونجا

  6. سیمین گفت:

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

    • وحید مجیدی صدر گفت:

      با سلام . میتونین در درون یک تگ p بندازید و به تگ p پراپرتی text-align:left بدهید

  7. امید قدرتی گفت:

    سلام
    واقعا ممنونم ازت کارم رو راه انداختی !
    سپاسگذارم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *