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

آموزش تراز کردن افقی در CSS

دوره های مرتبط با این مقاله

تراز کردن عنصرهای 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;
        }
امتحان کنید

اگر پهنا 100% باشد، تراز کردن اثر نخواهد داشت.
در 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 17 در سمت راست اضافه خواهد کرد. ظاهراً این فضا برای scrollbar رزرو شده است. هنگام استفده از پراپرتی float، !DOCTYPE را تعریف کنید:

نمونه پنج

     body {
            margin: 0;
            padding: 0;
        }
        .right {
            float: right;
            width: 300px;
            background-color: #b0e0e6;
        }
امتحان کنید
  • 3752
  •    2210
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .