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
تعداد اعضا : 36628
افراد آنلاین : 6
بازدید امروز : 939
بازدید دیروز : 1,200
گوگل امروز : 157
گوگل دیروز : 155
بازدید هفته : 939
بازدید ماه : 22,174
بازدید سال : 407,797
بازدید کلی : 10,802,273