سلام کاربران عزیز امروز در مورد تراز کردن عنصرهای block با هم میآموزیم لطفاباماهمراه باشید.
عنصر block، عنصری است که کل پهنای موجود را اشغال می کند، و دارای فاصله ای (line break) قبل و بعد از کنترل است.
نمونه هایی از عنصر block:
برای تراز کردن متن به قسمت اول مقاله مراجعه کنید.
در این بخش، به شما نشان می دهیم چگونه عنصر block را برای استفاده در layout تراز کنید.
تراز کردن در مرکز با استفاده از پراپرتی margin
عنصرهای block را می توان با تنظیم مارجین های چپ و راست روی “auto” تراز کرد.
نکته مهم: استفاده از margin:auto در IE کار نمی کند مگر اینکه یک !DOCTYPE تعریف شود.
تنظیم margin های چپ و راست روی auto، تعیین می کند که آنها باید margin موجود را بطور مساوی تقسیم کنند. نتیجه این کار، عنصری در مرکز خواهد بود:
نمونه یک
?
۱
۲
۳
۴
۵
۶
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
اگر پهنا ۱۰۰% باشد، تراز کردن اثر نخواهد داشت.
در IE، یک margin handling bug برای عنصرهای block وجود دارد. برای اینکه مثال های بالا در IE5 کارکند، باید کدهای بیشتری وارد کنید.
تراز چپ و راست با استفاده از پراپرتی Position
یکی از متدهای تراز کردن عنصرها، استفاده از موقعیت یابی مطلق (absolute positioning) است:
نمونه دو
?
۱
۲
۳
۴
۵
۶
.right{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
نکته مهم: عنصرهای موقعیت مطلق، از جریان نرمال حذف می شوند، و ممکن است با عناصر دیگر تداخل داشته باشند.
مسئله سازگاری Crossbrowser
هنگام تراز کردن عناصری مانند این، از پیش تعریف کردن margin و padding برای عنصر ایده خوبی است. این کار به معنای پرهیز از تفاوتهای visual در مرورگرهای مختلف است.
IE هنگام استفاده از پراپرتی position مشکل دیگری نیز دارد. اگر عنصر دربرگیرنده (در مثال ما، <div class=”container”>)
دارای پهنایی مشخص است، و هیچ !DOCTYPE تعریف نشده است؛ IE یک مارجین px 17 در سمت راست اضافه خواهد کرد. ظاهراً این فضا برای scrollbar رزرو شده است. هنگام استفده از پراپرتی 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;
background-color: #b0e0e6;
}
مسئله سازگاری Crossbrowser
هنگام تراز کردن عناصر ، از پیش تعریف کردن margin و padding برای عنصر ایده خوبی است. این کار به معنای پرهیز از تفاوتهای visual در مرورگرهای مختلف است.
IE هنگام استفاده از از پراپرتی float مشکل دیگری نیز دارد. اگر هیچ DOCTYPE! تعریف نشده باشد، IE یک مارجین px ۱۷ در سمت راست اضافه خواهد کرد. ظاهراً این فضا برای scrollbar رزرو شده است. هنگام استفده از پراپرتی float، !DOCTYPE را تعریف کنید:
نمونه پنج
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
