سلام کاربرای عزیز ، امیدوارم که خوب باشید و سلامت ، امروز میخوام درمورد css براتون یکم توضیح بدم . خیلی ها اینو از من می خوان که این قسمت از قالبت رو برام ببر وسط یا این که کلا قالب رو ببر وسط. مشکلی که هست اینه که مثلا یک تگ div رو می خوان کاملا وسط ببرن. نه متونشو ، در اصل می خواد خود باکس که مثلا پس زمینه داره ، کادر داره و … رو وسط ببرن که در بعضی مواقع کار خیلی سختیه.
وسط بردن یک باکس در وسط صفحه فقط در حالت افقی
در اینجا دو روش به شما یاد می دهیم که می توانید باکس خود را در وسط صفحه قرار دهید. البته وسطی که فقط به صورت افقی وسط صفحه باشد.
وسط صفحه با استفاده از تگ center
تگ center یکی از بهترین روش ها برای وسط بردن یک باکس و یا تگ می باشد. برای این روش شما نیاز به دو تا تگ دارید. یکی تگ Center و دیگری تگی که می خواید در وسط صفحه باشد. در مثال زیر استایل ها فقط برای نمایش مشخص است.
مثال
div{
font:13px tahoma;
border:1px #000 solid;
background:#a0f;
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
width:300px;
padding:10px
}
همون طور که در کد بالا می بینید ما با استفاده از تگ center کاری کردیم که یک باکس در وسط صفحه قرار بگیرد که عرض آن ۳۰۰ پیکسل می باشد و نمی تواند تمام صفحه را بپوشاند.
وسط صفحه با استفاده از css
ما می تونیم با استفاده از کد های CSS کاری کنیم که یک تگ در وسط صفحه (به صورت افقی) قرار بگیرد. این کار فقط با کد های CSS و یک تگ انجام میشه. بدین صورت که ما برای اون تگ عرض ۲۰ درصد را انتخاب می کنیم و با استفاده از margin-right و margin-left فاصله آن را با سمت چپ و راست تغییر بدیم. برای تعیین margin باید عرض انتخاب شده را از ۱۰۰ کم کنیم و بعد تقسیم بر دو کنیم که در اینجا به ۴۰ درصد می رسیم. در مثال زیر استایل اول برای زیبایی و نمایش زیباست و کد داده شده فقط دو قسمت margin و width در سی اس اس و قسمت div در body می باشد.
مثال
div{
font:13px tahoma;
border:1px #000 solid;
background:#a0f;
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
padding:10px;
/* قسمت اصلی کد */
width:20%;
margin:0 40% 0 40%;
}
وسط بردن یک تگ درون صفحه با استفاده از css به صورت عمودی و افقی
اول از همه باید این را بگم که مشکل این کد این هست که شما می بایست آن را درون صفحه ای خالی قرار دهید.
این کد با استفاده از سی اس اس ساخته شده و اینطور کار می کند که ما فاصله آن باکس را تا بالا و چپ صفحه در فاصله ۵۰ درصدی قرار می دهیم و بعد margin و width و height آن را دقیقا در وسط صفحه قرار دهید.
برای تعیین میزان margin-top باید مقدار height را تقسیم بر ۲ کرده و قرینه (منفی) کنیم.
برای تعیین میزان margin-left باید مقدار width را تقسیم بر ۲ کرده و قرینه (منفی) کنیم.
مثال
div{
font:13px tahoma;
border:1px #000 solid;
background:#a0f;
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
padding:10px;
/* قسمت اصلی استایل */
position:absolute;
top: 50%;
left: 50%;
width:400px;
height:300px;
margin-top: -150px; /*set to a negative number 1/2 of height*/
margin-left: -200px; /*set to a negative number 1/2 of width*/
}
روش دوم وسط بردن یک تگ درون صفحه با استفاده از css به صورت عمودی و افقی
مشکل این کد این است که در بعضی از مرورگر ها مانند Opera عمل نمی کند و بهتر است از همان روش قبلی استفاده کنید. (این کد برگرفته از قسمت تصاویر مرورگر FireFox می باشد.
در این کد شما به چهار طرف این باکس (top – left – bottom – right) عدد ۰ را وارد می کنید و بعد با گذاشتن margin در حالت auto باکس در وسط قرار می گیرد. در مثال زیر قسمت اول استایل فقط برای زیبایی و مشخص کردن باکس است.
مثال
div{
font:13px tahoma;
border:1px #000 solid;
background:#a0f;
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
padding:10px;
/* قسمت اصلی استایل */
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width:300px;
height:20px;
}
