جمعه ۲ مرداد ۱۴۰۵ |  عضویت / ورود

چطور می‌توان یک div را در تمام رزولوشن‌ها در وسط صفحه تنظیم کرد؟ (How to set div position to screen center)


Thursday, 2010 February 04   نویسنده: Hamid   تعداد بازدید: 12560 بار  #آموزش CSS (سی.اس.اس)   امتیاز متوسط: امتیازی داده نشده است

وقتی بحث DIV و CSS وسط می‌آید، یکی از مهم‌ترین سؤالات این است که چطور می‌توان یک div را با استفاده از css طوری تنظیم کرد که در تمام رزولوشن‌ها در وسط صفحه قرار گیرد؟

خیلی ساده است، شما معمولاً طول div را می‌دانید.

با استفاده از css طوری تنظیم می‌کنید که div از سمت چپ به اندازه 50٪ به وسط صفحه بیاید (که طبیعتاً 50 درصد در تمام رزولوشن‌ها یکی است) و سپس به اندازه نصف طول div به سمت چپ برگردد.

کد نهایی اینطور خواهد شد:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
.centered
    {
    position:absolute;
    width:200px;
    left:50%;
    margin-left:-100px;
   
    top:0px;
    }
//-->
</style>
</head>
<body>
<div class="centered">I'm in the middle</div>
</body>
</html>

اگر به کدها دقت کنید، متوجه می‌شوید که div ما 200 پیکسل طول داشته است، از سمت چپ، 50٪ از رزولوشن را به وسط منتقل شده و منفی 100 پیکسل به چپ برگشته...

نکته: طبیعتاً می‌دانید که شما position را باید روی absolute یا fixed ست کنید در غیراینصورت بقیه کدها عمل نخواهد کرد.

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


.


ارسال سؤال یا نظر

1- شریعتی:
بوسیله: , در: Sunday, 2012 February 19-کد: 4005
سایتتون خیلی بیسته

2- بیژن:
بوسیله: , در: Sunday, 2012 March 25-کد: 4127
سلام و یک دنیا ممنون
بسیار عالی بود
یکی از بزرگترین مشکلات من را بر طرف کردید
حمید جان من از سیستم مارجین صفر اوتو استفاده می کردم اما وقتی که اچ تی ام ال های خودمو تکه تکه کرده و با پی اچ پی اینکلود میکردم سی اس اس به هم میخورد که با این روش برطرف شد
اگر علت مشکل من را می دانید ممنون میشوم بزرگواری کنید و به من اطلاع دهید
bijan_hajiamiri@yahoo.com

3- سجاد:
بوسیله: , در: Sunday, 2013 February 03-کد: 6138
بی نهایت سپاس گذارم خدا بهتون خیر بده ان شاالله
فقط این کد روی IE جواب نمیده ممنون میشم اگر راهنمایی کنید

4- همایون:
بوسیله: , در: Friday, 2013 April 19-کد: 6648
مرسی خیلی عالی بود
ساده ولی به درد بخور

5- علی:
بوسیله: , در: Tuesday, 2015 August 18-کد: 13718
سلام.
حمید جان دمت گرم.
نمیدونم این متنو میخونی یا نه.
ولی حسابی بهم کمک کرد تو طراحی صفحاتم.
خیلی ازت ممنونم.
یک دنیا ممنون.

6- السا:
بوسیله: , در: Saturday, 2017 April 29-کد: 15105
سلام وققتون بخیر، من میخام فایل های ویدئوییم تو وبلاگم دقیقا وسط کادر باشه، چطور باید اینکار رو بکنمrn


Tutorials ©