آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

تنظیم موقعیت در وسط و حذف حاشیه ها با CSS

اگر یک طراح وب حرفه ای یا علاقمند به طراحی قالب شخصی برای سایت یا وبلاگ خود باشید حتما با کدهای CSS آشنا هستید و بارها از آنها در شکل دهی فرم و ظاهر صفحات وب استفاده کرده اید، اگرچه کار با CSS به طور کلی چندان پیچیده و سخت نیست اما همواره جزئیات و ریزه کاری هایی وجود دارند که باعث می شوند نکاتی هرچند ساده به نظر مبهم و حل نشده باقی بمانند، در این مطلب می خواهیم یکی از شایع ترین این موارد را با هم مرور کنیم که تنظیم موقعیت عناصر HTML و به طور خاص بلاک های div در وسط بلاک والد یا در مرکز صفحه نمایش و همچنین حذف حاشیه ها از لبه های کناری مرورگر و صفحه نمایش به کمک CSS است، این نوع تکنیک ها معمولا در طراحی رابط کاربری وب و قالب هایی که از تمام ظرفیت صفحه نمایش استفاده می کنند مورد نیاز خواهند بود.

نحوه تنظیم بلاک در وسط بلاک والد با استفاده از CSS

در هنگام طراحی و کدنویسی قالب های وب معمولا تنظیم بلاک ها در سمت چپ یا راست بلاک والد به کمک عنصر float و مقادیر left, right یا استفاده از display با مقادیر inline-block و در نظر گرفتن margin مناسب به آسانی ممکن است، اما مشکل بیشتر کاربران تنظیم بلاک در وسط بلاک والد آن است که در تمام مرورگرها نیز یکسان باشد، در مثال زیر این کار را برای لایه div با کلاس فرضی center-block انجام داده ایم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظیم بلاک در وسط بلاک والد با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.parent-block{
    width:100%;
    height:200px;
    background-color:#C0C0C0;
    border:1px solid #F90004;    
}
.center-block{
    width:300px;
    height:200px;
    background-color:#CC3;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
<div class="parent-block">
<div class="center-block"></div>
</div>
<hr>
برای تنظیم بلاک در وسط بلاک والد از margin-left و margin-right با مقادیر auto استفاده می کنیم، در نمونه کد بالا بلاک رنگی در وسط بلاک والد خود قرار گرفته و متمایز است.
</body>
</html>

پیش نمایش
همانطور که در کد ملاحظه می کنید از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط بلاک والد آن تنظیم می کند، علاوه بر این می توانیم با مقادیر

margin: 0 auto;

نیز یک بلاک را در وسط عنصر والد آن تنظیم کنیم.

نحوه تنظیم بلاک در وسط صفحه با استفاده از CSS

در طراحی رابط کاربری وب ممکن است نیاز به نمایش بلاکی در وسط صفحه مرورگر باشد که معمولا جهت نمایش پنجره پاپ آپ سفارشی یا نمایش پیام تائید، ایجاد قسمت ورود به سایت و مواردی از این دست استفاده می شود، طراحی این قسمت نیز با کدنویسی HTML و تعیین استایل CSS مناسب ممکن است:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظیم بلاک در وسط صفحه نمایش با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.popup-block{
    position:fixed;
    top:50%;
    left:50%;
    width:300px;
    height:200px;
    margin-top:-100px;
    margin-left:-150px;
    background-color:#318DAF;    
}
</style>
</head>
<body>
<div class="popup-block"></div>
<hr>
برای تنظیم بلاک در وسط صفحه نمایش از position با مقادیر fixed یا absolute استفاده می کنیم، همچنین خاصیت های top و left باید با مقدار 50 درصد تعریف شوند، نکته مهم دیگر اینکه متناسب با top و left باید margin-top و margin-left با نصف مقدار height و width به صورت منفی مقداردهی شوند.
</body>
</html>

پیش نمایش
از چند خاصیت در این تکنیک استفاده شده، ابتدا بلاک div را با اندازه پیکسلی مشخص ایجاد و با خاصیت position و مقادیر fixed یا absolute مقداردهی می کنیم، این کار باعث می شود بلاک ما به صورت مستقل از سایر عناصر والد خاصیت های CSS را اجرا کند، در گام دوم برای اینکه بلاک در وسط صفحه قرار بگیرد با خاصیت top و left (یا right) از بالای صفحه نمایش 50 درصد و از سمت چپ (یا راست) نیز 50 درصد حاشیه ایجاد می کنیم، با توجه به اینکه تاثیر مقادیر از لبه های کناری بلاک محاسبه می شود و عنصر دقیقا در وسط صفحه قرار نمی گیرد باید margin-top و margin-left با مقادیر منفی در نظر بگیریم تا دقیقا از وسط بلاک مقدار top و left محاسبه شود، قاعدتا برای این کار باید margin-top و margin-left را با نصف مقادیر height و width به صورت منفی در نظر بگیریم تا بلاک از موقعیت فعلی خود به سمت بالا و چپ حرکت کند و دقیقا در وسط صفحه نمایش قرار گیرد.

حذف حاشیه ها از لبه های کناری با استفاده از CSS

به طور معمول مرورگرهای وب خاصیت هایی را با مقادیر مشخص به صورت پیش فرض روی عناصر موجود در صفحه وب اعمال می کنند که یکی از این موارد در نظر گرفتن مقدار padding و margin برای تگ html یا body است که موجب می شود اندک فضای خالی در گوشه ها و لبه های کناری مرورگر و صفحه نمایش ایجاد شود، خوشبختانه برای حذف این حاشیه هایی که شاید مد نظر ما نباشند می توانیم در قسمت استایل CSS برای این دو تگ padding و margin اختصاصی با مقدار 0 تعریف کنیم تا قالب به اصطلاح به طور کامل به گوشه های پنجره مرورگر بچسبد و تمام فضای موجود را پوشش دهد، به طور مثال:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | حذف حاشیه ها از لبه های کناری با استفاده از CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.top-block{
    width:auto;
    height:200px;
    background-color:#CC3;
}
</style>
</head>
<body>
<div class="top-block"></div>
<hr>
 با استفاده از ویژگی های padding و margin و در نظر گرفتن مقدار 0 برای تگ html و body، فاصله پیش فرض حاشیه های صفحه نمایش از تگ والد قالب حذف می شود.
</body>
</html>

پیش نمایش
در مثال بالا بلاکی با کلاس فرضی top-block را بین تگ body ایجاد کرده ایم که حاشیه آن 0 است و برای body و html نیز از مقادیر padding و margin با مقدار 0 استفاده کرده ایم، به این ترتیب هیچ حاشیه اضافه ای بین قالب وب و صفحه نمایش ایجاد نمی شود و می توانیم از تمام فضای موجود استفاده کنیم، این شیوه امروزه یک روش مرسوم در بین طراحان وب و به خصوص در طراحی قالب های واکنش گرا (Responsive) است، برخی طراحان نیز از فایل هایی تحت عنوان Reset استفاده می کنند که با این روش تمام خاصیت های پیش فرض CSS مرورگرها را نادیده می گیرند.
نکته: با وجود اینکه در استانداردهای جدید کنسرسیوم جهانی وب W3C تگ html نباید padding و margin پیش فرض داشته باشد، با این حال برخی مرورگرها همچنان رویه خاص خودشان را دارند و بهتر است که در کنار تگ body برای تگ html نیز padding و margin را برابر 0 قرار دهیم.

دسته بندی: آموزش کاربردی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
حذف اسکرول افقی (Horizontal Scroll) با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
چسبیدن فوتر قالب به پائین صفحه با CSS

دیدگاه

۳۱ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

اسماعیل سیدی

۲۳:۵۰ ۱۴۰۲/۱۲/۱۴

با سلام
سایت

حذف شد

نگاه کنید با نسخه دسکتاپ وقتی وسط رو به طرف پایین اسکرول می کنیم سمت چپ ثابته و فقط ستون وسط بالا و پایین میشه چطور می تونم منم اینطوری واسه سایتم بذارم؟
با تشکر

برای ایجاد این قابلیت از خاصیت position با مقادیر sticky در استایل نویسی CSS قالب سایت استفاده می کنند، لطفا آدرس زیر را ملاحظه کنید:

https://developer.mozilla.org/en-US/docs/Web/CSS/position

سینا

۲۰:۰۹ ۱۴۰۱/۰۱/۰۱

با تشکر از شما
بله حق با شماست کدهای شما عمل می کنه فقط یه مشکل داره وقتی با گوشی موبایل چند بار اسکرول می کنی div چپ غیب می شه!

کد پاسخ قبلی ویرایش و اصلاح شد.

سینا

۱۴:۵۷ ۱۴۰۱/۰۱/۰۱

با تشکر از شما استاد
نه مطابق الگویی که گفتم نیست مطالب وبلاگ بعد از مطالب تصادفی میاد یعنی div چهارم من می خوام مطالب وبلاگ بعد از آخرین مطالب باشه یعنی #left بعد از آخرین مطالب باشه من می خوام div دوم باشه!

برای ایجاد حالت واکنش گرا مطابق با چینش مد نظر می توانید دستورات زیر را در انتهای کد قالب قبل از بسته شدن تگ body درج کنید:

<script>
var responsive = false;
function smartResponsive(){
    var left_div = document.getElementById('left');
	var vip_div = document.getElementById('vip');
	
    if(window.innerWidth <= 460 && !responsive) {
        vip_div.innerHTML = left_div.innerHTML;
        setTimeout(function() {left_div.innerHTML = '';}, 100);
        responsive = true;
    } else if(window.innerWidth > 460 && responsive) {
        left_div.innerHTML = vip_div.innerHTML;
        setTimeout(function() {vip_div.innerHTML = '';}, 100);
		responsive = false;
    }
}
smartResponsive();
window.onresize = smartResponsive;
</script>

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

سینا

۰۳:۵۰ ۱۴۰۱/۰۱/۰۱

با سلام و خسته نباشید و تبریک سال جدید
ببخشید سایت من رو نگاه کنید

yun.ir/1x0gs4

چطوری می تونم برای سایز پیکسل های پایین صفحه نمایش موقعیت div هارو تغییر بدم؟ البته می دونم با order عوض میشه ولی هرکاری کردم چینش واسه همه سایت (main) اعمال نمیشه و فقط واسه دیو #right و #left انجام میشه و موقعیت دیوهای موجود در اینها عوض میشه! من می خوام وقتی پیکسل صفحه موبایل کوچکتر میشه موقعیت div ها اینطوری لحاظ بشه!
اول آخرین مطالب که div راست است
بعد اون div چپ که مطالب هستن
بعد اون هم مطالب محبوب
بعد اونم مطالب تصادفی
ممنون میشم کمک کنید
با تشکر فراوان

این موضوع به طراحی واکنش گرا (Responsive) قالب مربوط می شود که مبتنی بر CSS و HTML است، سورس قالبتان را باید برای این هدف به صورت ریسپانسیو بازنویسی کنید که البته طبق تست ما در حال حاضر قالبتان برای ابعاد کوچک مرورگر به درستی به حالت واکنش گرا تبدیل می شود و دقیقا چینش بلاک ها مطابق با الگویی است که درج کرده اید.

Hashem

۰۴:۳۵ ۱۳۹۷/۱۱/۰۷

با سلام به استاد گرامی.
آموزش های شما واقعا حرف ندارد و در کل وب بسیار نایاب است.
واقعا خسته نباشید میگم به شما استاد گرامی.
بنده عاجزانه یک درخواستی از شما استاد ارجمند دارم.
متاسفانه قالب سایت من نوشته ها را بصورت کامل در وسط صفحه نمایش نمی دهد و این موضوع به چپ و راست بودن قالب نیست و قالب کاملا راستچین است.
بنده می خواهم در قالب .. قسمت نوشته ها بصورت کامل در وسط صفحه نمایش داده بشن ولی هرکاری می کنم امکانپذیر نیست.
آدرس سایت بنده :

https://hamyargps.com/blog/mobile-tracking-without-installing-app/

اما یک سایتی هست که دقیقا از همین قالب استفاده می کند ولی کاملا وسط چین و شکیل است.
آدرس سایت مقابل :

https://superfamilyprotector.com/blog/

خواهش می کنم یک کدی چیزی به من معرفی کنید تا بتونم این مشکل بزرگ سایتم را برطرف کنم.
با تشکر از شما استاد گرامی.

هر دو سایت بررسی شد، ظاهرا مشکل بر طرف شده است؟!

حبیب

۱۰:۵۲ ۱۳۹۶/۰۲/۲۰

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

تا آنجا که اطلاع داریم انجام این کار صرفا در موبایل و با متاتگ زیر ممکن است:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>

امیر

۰۰:۰۰ ۱۳۹۴/۱۲/۱۱

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

سوالتان کلی است!، برای طراحی قالب باید بر CSS و بحث فرمت بندی با تگ div و خاصیت display مسلط باشید که این کار نیازمند طی فرآیند یادگیری از مقدمات است، ضمن اینکه کدهای ASP چون سمت سرور هستند قاعدتا نباید در خروجی سمت کاربر دیده شوند و لذا مشکلی از این نظر نخواهد بود!

زهرا

۱۴:۲۲ ۱۳۹۴/۱۱/۲۹

سلام
من وقتی یک div میسازم و داخلش تگ p میزارم با وجود اینکه به تگ p مارجین و پدینگ میدم بازم وقتی داخل تگ p متن مینویسم وقتی محدوده دیو تموم میشه متنم از دیو میزنه بیرون و نمیره خط بعدی البته به دیو هم مارجین و پدینگ دادم
چه کنم؟

در حالت معمولا نباید چنین اتفاقی رخ دهد، مگر اینکه از متن های به هم پیوسته بدون فاصله به فرض "وببببببب..." استفاده کنید یا برای خاصیت overflow مقدار خاصی در نظر گرفته باشید.

سعیده

۱۴:۳۰ ۱۳۹۴/۰۸/۲۳

<html>
<head>
<title>home page</title>
<style type="text/css">
body{
    margin:0px;
    padding:0px;
}
[class="c1"]{
     background-color:#F74040;  width:5%; height:4%; align-items:flex-start; float:left;
}
[class="c2"]{
      background-color: #ff7464; width: 5%; height: 4%; float: left;
}
</style>
</head>
<body>
<div>
<div class="c1">1</div>
<div class="c2">2</div>
</div>
</body>
</html>

لطفا ارور برنامه بنده را بفرمایید. چون که عمل نمیکند

چند خطا در کدها وجود داشت (کد اصلاح شد):
- تگ style با فاصله استفاده شده که صحیح نیست!:

< style type="text/css">

- نحوه تعریف سلکتورها برای کلاس ها و نام انتخاب شده برای کلاس صحیح نیست (نام کلاس نمی تواند صرفا عدد یا با اعداد شروع شود):

class="1"

- کد رنگ استفاده شده صحیح نیست (باید شش کاراکتر باشد!):

background-color: #f474040;

azin

۱۱:۳۸ ۱۳۹۴/۰۷/۲۵

سلام
برای جداسازی div از فایل های css باید چیکار کنم؟
من الان ۲ تگ div که نمی خوام با فایل های css قاطی بشه باید چی کار کنم

پاسخ این نوع سوالات کوتاه و ساده نیست! قاعدتا هر طور که در فایل CSS استایلتان را تعریف کنید، به همان نحو در صفحه وب موثر خواهد بود، بر این اساس اگر تگ div مورد نظر دارای یک class است، می توانید نام آن را تغییر دهید و استایل متفاوتی برای کلاس جدیدتان در نظر بگیرید، اگر هم div دارای class نیست، باید در فایل CSS برای سلکتور div استایل را حذف کنید (البته این کار ممکن است بر روی سایر موارد نیز تاثیر داشته باشد که در این صورت باید مورد به مورد و به صورت اختصاصی در کلاس آنها، استایل را تعریف کنید)، در هر صورت حداقل آشنایی با CSS مورد نیاز است و بدون تجربه قبلی نمی توانید به راحتی این تغییرات را اعمال کنید.

داوود

۰۸:۴۷ ۱۳۹۴/۰۷/۰۸

سلام آقای مهندس،
صبحتون بخیر.
استاد الان داشتم سوالات دوستان رو نگاه میکردم، فکر کنم تنها ( و بهترین) راه مورد نظر برای اینکه مژگان خانوم به هدفشون برسن، یادگیری ریسپانسیو هستش. درست عرض کردم خدمتتون؟؟

طراحی وب در کل چند سبک مختلف دارد که یکی از آنها می تواند طراحی واکنش گرا یا Responsive باشد، این شیوه بسته به نیاز و تا حدودی سلیقه است و مزایا و معایب خودش را دارد که یکی از مزایای این سبک سازگاری قالب با اندازه صفحه نمایش است، البته اگر کاربر مورد نظر تجربه کافی در طراحی قالب ها با مقدار ثابت یا درصدی را داشته باشد، رفع چنین مشکلاتی الزاما به استفاده از طراحی Responsive موکول نیست، اگر اینطور نبود باید تمام قالب های وب به این حالت طراحی می شد!

Ismaeil

۱۴:۲۶ ۱۳۹۴/۰۶/۱۴

سلام
اگه میشه اینو اموزش بدید
یک متن بین دو دایو حرکت کند

برای این موارد بهتر است از jQuery استفاده کنید:

https://remysharp.com/2008/09/10/the-silky-smooth-marquee

http://download.remysharp.com/marquee.html

موسوی

۱۲:۱۵ ۱۳۹۴/۰۶/۰۷

سلام . ممنون از مطالب شما یه سئوال اساسی و مرتبط با این بخش داشتم که هنوز جوابش رو هیجا ندیدم.
چطور میشه فرضا یه تگ دیو با عرض 800 داریم و بخواهیم داخلش سه تا دیو در یک راستا دقیقا از هم دیگه و خود دیو مادر به یک فاصله باشن. فرض عرض دیو داخلی هر کدام 200 باشد . برای اینکار من مجبورم کلی ضرب و تقسیم کنم و سپس با مارگین و پادینگ و چیدن در راست و چپ این 3 دیو رو در وسط دیو مادر قرار بدم . حال اگه مثلا دیو مادر عرضش بشه 850 دوباره واس همه دیو های داخلی رو تنظیم کنیم . حالا همینطوریه یا روش دیگه هم هست ؟!!

چند شیوه طراحی در وب وجود دارد که یک حالت آن روش پیکسل دهی ثابت است، در این روش قاعدتا اندازه بلاک ها از قبل مشخص است و عناصر درونی نیز از بلاک والد خود پیروی می کنند، لذا اگر قرار به تغییر اندازه بلاک والد باشد، عناصر درونی نیز باید به همان نسبت تغییر اندازه دهند، در شیوه دیگر و بسته به نیاز ممکن است بلاک والد مقداردهی پیکسلی و بلاک های درونی مقدار دهی درصدی داشته باشند که در این صورت هر چقدر بلاک والد تغییر اندازه دهد، بلاک های درونی به همان نسبت، به صورت خودکار تغییر اندازه می دهند!

داوود

۱۹:۱۳ ۱۳۹۴/۰۵/۱۹

سلام آقای مهندس، وقتتون بخیر؛ استاد تو یه مطلب آموزشی دیدم اینجوری نوشته، آیا درسته بنظرتون؟؟
نوشته بود "در حالت Block عنصر مورد نظر یک خط قبل و بعد از خودش را هم خالی می گذارد."
آیا بد ننوشته؟ چون در حالت block عنصر نسبت به همون خطی که هستش کل فضا رو تا انتها میگیره و به خط قبل و بعدش دیگه کاری نداره که اونجوری نوشته!!!

شاید منظور نویسنده این بوده که عنصر block در حالت معمول اجازه نمایش سایر عناصر در یک راستا را نمی دهد و آنها را به یک خط قبل یا بعد هدایت می کند.

مصطفی

۱۸:۰۷ ۱۳۹۳/۱۰/۰۹

آقا ممنون بابت این سایت واقعا جامع و کاملتون،
فقط یه چیز بهتون بگم اونم اینکه من هرچی تو گوگل میزنم برا مطالبم یکی از بهترین نتیجه ها سایت شما هستش .
بازم ممنون

نخست

قبلی

بعدی

آخر

صفحه 1 از 3

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.