Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

کعبه ی آمال مرکز سازی با CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Persian (پارسی) translation by Alireza Farasat Memar (you can also view the original English article)

کیریس کُویِر اخیراً در سایت خود، حقه‌های css، یک درخت تصمیم گیری منتشر کرده که راه‌های مختلفی برای در مرکز قرار دادن اشیا به صورت افقی و عمودی به وسیله ی CSS را نشان می دهد. تمام راه حل‌های مستقل نقاط ضعفی دارند، اما ترکیب أن ها یک ابزار مرکزسازی خواهد بود که در تمام مرورگرهای IE8 و مرورگرهای بعد آن کار میکند.

این روش انجام این کار است.

بلوک های آغازین

اگر شما می‌خواهید یک وب سایت پاسخ‌گو به ابعاد (responsive ) بسازید، به طور معمول ابعاد عناصر صفحه را به درصد مشخص میکنید، اجازه بدین عنصر .container را بسازیم:

برای اینکه از درست کشیده شدن عناصر مطمئن شویم، html, body { width: 100%; height: 100%; } را تنظیم میکنیم.

تبدیل به جدول

حالا، درون .container، ما مرکزسازی عمودی را به روش معمول جدول ایجاد میکنیم. این روش بلوک عناصر را میگیرد و آن‌ها را وادار میکند تا شبیه سلول های جدول عمل کنند و به ما مرکزسازی عمودی را بدهند:

در آخر، ما مرکزسازی افقی را به عنصرمان اضافه میکنیم:

در اینجا، میتوانید هرچیزی که مایل هستید را قرار دهید، شامل یک بلوک متنی با ارتفاع متغییر، یا یک عنصر با محل دقیق.

تغییرات

برای تغییر دادن مرکز افقی عنصر کافی است ویژگی text-align را در .inner تغییر بدین. برای تغییر دادن مرکز عمودی هم باید ویژگی vertical-align را در .inner تغییر دهید.

نتیجه‌گیری

ممکن است در این مثال تعداد نشانه گذاری ها زیاد بنظر برسد، ولی بخش‌هایی که کار اصلی را انجام میدهند، سه div با: کلاس .outer، کلاس .inner، و کلاس .centered است و کد CSS برای آن‌ها ثابت است بنابراین میتوانید آن را داخل قالب اولیه CSS تمام پروژه هاتون قرار داده و دیگر نگرانش نباشین.

در واقع این روش يك عنصر بيشتر از اكثر روش ها داشته و کاملا خلل ناپذیر است! من امیدروارم که این روش تبدیل به یک روش استاندارد شود و ما دیگر نگران مرکزسازی در CSS نباشیم.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.