HTML و CSS

آموزش برنامه نویسی Align – CSS در CSS

درود
تراز افقی CSS

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

برای تراز متن، فصل متن CSS را مطالعه کنید.
در این فصل ما به شما چگونگی تراز عناصر بلوک به صورت افقی برای اهداف طرح بندی را نشان خواهیم داد.
تراز وسط با استفاده از خاصیت margin
عناصر بلوک می توانند با تنظیم حاشیه های چپ و راست بر روی “auto” تراز شوند.
توجه: استفاده از margin:auto در IE8 و نسخه های قبل از آن کار نخواهد کرد ، مگر اینکه یک DOCTYPE! بیان شود.
تنظیم حاشیه های چپ و راست بر روی خودکار مشخص می کند که آنها باید حاشیه موجود را به طور مساوی تقسیم کنند. نتیجه یک عنصر با تراز مرکزی است:

نکته: اگر عرض ۱۰۰٪ باشد ، هماهنگی دیگر اثر ندارد.
توجه: در IE5 یک باگ حاشیه برای عناصر بلوک وجود دارد. برای اینکه نمونه بالا در IE5 کار کند، چند کد بیشتر اضافه کنید : مشاهده نتیجه
تراز چپ و راست با استفاده از خاصیت position
یکی از روش های تراز عناصر استفاده از موقعیت مطلق است:

وجه داشته باشید: موقعیت مطلق عناصر از جریان عادی خارج شده است، و می تواند عناصر را با یکدیگر همپوشانی دهد.
مسئله سازگاری Crossbrowser
هنگام تراز عناصری شبیه به این ، تعریف از پیش تعیین شده margin و padding برای عنصر ، همیشه یک ایده خوب است. این برای جلوگیری از تفاوت های بصری در مرورگرهای مختلف است.
هنگامی که از خاصیت position استفاده می کنیم ، مشکلی در IE8 و قبل از آن وجود دارد. اگر یک عنصر ظرف (در مورد ما ) عرض مشخصی داشته باشد ، و بیانیه DOCTYPE! از دست رفته باشد، IE8 و نسخه های قبلی یک حاشیه ۱۷px در سمت راست اضافه خواهد کرد. این به نظر می رسد که فضای محفوظی برای اسکرول است. همیشه بیانیه DOCTYPE! در هنگام استفاده از خاصیت position تنظیم کنید :

تراز چپ و راست با استفاده از خاصیت float
یکی از روش های تراز عناصر استفاده از خاصیت float است :

مسئله سازگاری Crossbrowser
هنگام تراز عناصری شبیه به این ، تعریف از پیش تعیین شده margin و padding برای عنصر ، همیشه یک ایده خوب است. این برای جلوگیری از تفاوت های بصری در مرورگرهای مختلف است.
هنگامی که از خاصیت float استفاده می کنیم ، مشکلی در IE8 و قبل از آن وجود دارد. اگر بیانیه DOCTYPE! از دست رفته باشد، IE8 و نسخه های قبلی یک حاشیه ۱۷px در سمت راست اضافه خواهد کرد. این به نظر می رسد که فضای محفوظی برای اسکرول است. همیشه بیانیه DOCTYPE! در هنگام استفاده از خاصیت float تنظیم کنید:

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *