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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 نکته 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. امید قدرتی گفت:

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

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

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