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

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

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

وسط صفحه با استفاده از تگ 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 باکس در وسط قرار می گیرد. در مثال زیر قسمت اول استایل فقط برای زیبایی و مشخص کردن باکس است.