در این مقاله با مفاهیمی مانند margin: auto ، text-align: center ، position: absolute، float و غیره آشنا خواهیم شد.
آموزش طراحی سایت چیدمان عناصر در CSS
وسط چین کردن المان ها
برای اینکه عناصر block مانند <div> را وسط چین کنید از ;margin: auto استفاده کنید.
اگر نمی خواهید که عنصر از فضای در نظر گرفته شده خارج شود برای آن ویژگی width تعریف کنید.
به این ترتیب عنصر عرض مشخص را به خود اختصاص داده و باقی فضا در دوطرف آن تقسیم میشود
در مثال زیر المان div وسط چین شده است:
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
مشاهده نتیجه
نکته : وسط چین کردن بدون تعیین width عمل نخواهد کرد. همچنین اگر عرض عنصر 100% باشد نیز این ویژگی عمل نخواهد کرد.
وسط چین کردن متن
برای اینکه متنی را در وسط عنصر چیدمان کنید. باید از ویژگی ;text-align: center استفاده کنید.
مثال:
.center {
text-align: center;
border: 3px solid green;
}
مشاهده نتیجه
وسط چین کردن عکس
برای اینکه عکس را وسط چین کنید از ویژگی ;margin: auto استفاده کنید. این ویژگی عکس را با عنصری که عکس درون آن است وسط چین می کند.
مثال:
img {
display: block;
margin: auto;
width: 40%;
}
مشاهده نتیجه
چپ چین و راست چین کردن با استفاده از ویژگی ;position: absolute :
این ویژگی مانند این است که به عنصری بگوییم دقیقا در چه موقعیت مکانی نسبت به عنصر دیگر قرار گیرد.
مثال:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
مشاهده نتیجه
نکته : المانی که از Absolute positioned استفاده می کند از ویژگی های چیدمان نرمال خارج شده و میتواند با عناصر دیگر همپوشانی داشته باشد.
نکته: هنگامی که قصد استفاده از position را دارید همواره از ویژگی های margin و padding برای تگ <body> استفاده کنید . اینکار مانع نمایش های متفاوت در مرورگرهای مختلف می گردد.
مشکل دیگری در مروگرهای IE8 و قدیمی تر وجود دارد، وقتی که از ویژگی position استفاده می کنید . و عنصری که آن را دربردارد در این مثال <div class="container"> دارای عرض مشخصی باشد و شما از معرفی DOCTYPE! خودداری کرده باشید. IE8 و مرورگرهای قدیمی تر 17px margin را به سمت راست المان اختصاص خواهند داد. این فضا برای عدم همپوشانی با اسکرول بار صفحه ایجاد میشود. بنابراین هنگام استفاده از position همواره DOCTYPE! را تعریف کنی:
مثال:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
مشاهده نتیجه
چپ چین و راست چین کردن با استفاده از float
یکی دیگر از روش های چیدمان عناصر استفاده از ویژگی float است:
مثال:
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
مشاهده نتیجه
نکته : هنگامیکه از ویژگی float برای چیدمان صفحه استفاده میکند همواره برای تگ <body> ویژگی های margin و padding را تعریف کنید.اینکار مانع نمایش متفاوت در مرورگرهای مختلف میگردد.
در اینجا هم با مرورگرهای IE8 و یا قدیمیتر مشکل داریم، هنگام استفاده از float اگر از DOCTYPE! استفاده نکنیم بازهم به تگ ما 17px margin به سمت راست اضافه میگردد تا با اسکرول صفحه همپوشانی نداشته باشد بنابراین همواره از DOCTYPE! در هنگام بکارگیری ویژگی float استفاده کنید:
مثال:
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
مشاهده نتیجه
چیدمان عمودی با استفاده از padding
روش های مختلفی برای چیدمان عمودی یک عنصر در CSS وجود دارد. یک راه حل ساده استفاده از padding بالا و پایین است
مثال:
.center {
padding: 70px 0;
border: 3px solid green;
}
مشاهده نتیجه
برای چیدمان افقی و عمودی از هر دو ویژگی padding و text-align: center استفاده کنید
مثال:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
مشاهده نتیجه
وسط چین کردن عمودی با استفاده از line-height
یک روش دیگر برای چیدمان عمودی استفاده از ویژگی line-height است این ویژگی باید مقداری برابر با ویژگی height داشته باشد.
مثال:
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* اگر متن چند خطی بود از این کد استفاده کنید: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
مشاهده نتیجه
وسط چین کردن عمودی با استفاده از position & transform
اگر padding و line-height گزینه های مناسبی برای چیدمان صفحه شما نیستند . از ویژگی های positioning و transform استفاده کنید:
مثال :
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
مشاهده نتیجه
تهیه و تنظیم توسط شرکت طراحی سایت سارگون با ما در تماس باشید.