Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش نحوه وسط بردن باکس ها در وسط صفحه

خیلی ها اینو از من می خوان که این قسمت از قالبت رو برام ببر وسط یا این که کلا قالب رو ببر وسط. مشکلی که هست اینه که مثلا یک تگ div رو می خوان کاملا وسط ببرن. نه متونشو ، در اصل می خواد خود باکس که مثلا پس زمینه داره ، کادر داره و ... رو وسط ببرن که در بعضی مواقع کار خیلی سختیه.

وسط بردن یک باکس در وسط صفحه فقط در حالت افقی

در اینجا دو روش به شما یاد می دهیم که می توانید باکس خود را در وسط صفحه قرار دهید. البته وسطی که فقط به صورت افقی وسط صفحه باشد.

وسط صفحه با استفاده از تگ center

تگ center یکی از بهترین روش ها برای وسط بردن یک باکس و یا تگ می باشد. برای این روش شما نیاز به دو تا تگ دارید. یکی تگ Center و دیگری تگی که می خواید در وسط صفحه باشد. در مثال زیر استایل ها فقط برای نمایش مشخص است.

 

مثال


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

وسط صفحه با استفاده از css

ما می تونیم با استفاده از کد های CSS کاری کنیم که یک تگ در وسط صفحه (به صورت افقی) قرار بگیرد. این کار فقط با کد های CSS و یک تگ انجام میشه. بدین صورت که ما برای اون تگ عرض 20 درصد را انتخاب می کنیم و با استفاده از margin-right و margin-left فاصله آن را با سمت چپ و راست تغییر بدیم. برای تعیین margin باید عرض انتخاب شده را از 100 کم کنیم و بعد تقسیم بر دو کنیم که در اینجا به 40 درصد می رسیم. در مثال زیر استایل اول برای زیبایی و نمایش زیباست و کد داده شده فقط دو قسمت margin و width در سی اس اس و قسمت div در body می باشد.

مثال


وسط بردن یک تگ درون صفحه با استفاده از css به صورت عمودی و افقی

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

این کد با استفاده از سی اس اس ساخته شده و اینطور کار می کند که ما فاصله آن باکس را تا بالا و چپ صفحه در فاصله 50 درصدی قرار می دهیم و بعد margin و width و height آن را دقیقا در وسط صفحه قرار دهید.

برای تعیین میزان margin-top باید مقدار height را تقسیم بر 2 کرده و قرینه (منفی) کنیم.

برای تعیین میزان margin-left باید مقدار width را تقسیم بر 2 کرده و قرینه (منفی) کنیم.

مثال


روش دوم وسط بردن یک تگ درون صفحه با استفاده از css به صورت عمودی و افقی

مشکل این کد این است که در بعضی از مرورگر ها مانند Opera عمل نمی کند و بهتر است از همان روش قبلی استفاده کنید. (این کد برگرفته از قسمت تصاویر مرورگر FireFox می باشد.

در این کد شما به چهار طرف این باکس (top - left - bottom - right) عدد 0 را وارد می کنید و بعد با گذاشتن margin در حالت auto باکس در وسط قرار می گیرد. در مثال زیر قسمت اول استایل فقط برای زیبایی و مشخص کردن باکس است.

مثال



نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36613
افراد آنلاین : 4
بازدید امروز : 811
بازدید دیروز : 1,373
گوگل امروز : 71
گوگل دیروز : 164
بازدید هفته : 8,083
بازدید ماه : 30,439
بازدید سال : 376,038
بازدید کلی : 10,770,514