Persian (پارسی) translation by Alireza Farasat Memar (you can also view the original English article)
کیریس کُویِر اخیراً در سایت خود، حقههای css، یک درخت تصمیم گیری منتشر کرده که راههای مختلفی برای در مرکز قرار دادن اشیا به صورت افقی و عمودی به وسیله ی CSS را نشان می دهد. تمام راه حلهای مستقل نقاط ضعفی دارند، اما ترکیب أن ها یک ابزار مرکزسازی خواهد بود که در تمام مرورگرهای IE8 و مرورگرهای بعد آن کار میکند.
این روش انجام این کار است.
بلوک های آغازین
اگر شما میخواهید یک وب سایت پاسخگو به ابعاد (responsive ) بسازید، به طور معمول ابعاد عناصر صفحه را به درصد مشخص میکنید، اجازه بدین عنصر .container
را بسازیم:
<div class="container"> ... </div>
.container { width: 70%; height: 70%; margin: 40px auto; background: red; }
برای اینکه از درست کشیده شدن عناصر مطمئن شویم، html, body { width: 100%; height: 100%; }
را تنظیم میکنیم.
تبدیل به جدول
حالا، درون .container
، ما مرکزسازی عمودی را به روش معمول جدول ایجاد میکنیم. این روش بلوک عناصر را میگیرد و آنها را وادار میکند تا شبیه سلول های جدول عمل کنند و به ما مرکزسازی عمودی را بدهند:
<div class="container"> <div class="outer"> <div class="inner"> ... </div> </div> </div>
.outer { display: table; width: 100%; height: 100%; } .inner { display: table-cell; vertical-align: middle; text-align: center; }
در آخر، ما مرکزسازی افقی را به عنصرمان اضافه میکنیم:
<div class="container"> <div class="outer"> <div class="inner"> <div class="centered"> ... </div> </div> </div> </div>
.centered { position: relative; display: inline-block; width: 50%; padding: 1em; background: orange; color: white; }
در اینجا، میتوانید هرچیزی که مایل هستید را قرار دهید، شامل یک بلوک متنی با ارتفاع متغییر، یا یک عنصر با محل دقیق.

تغییرات
برای تغییر دادن مرکز افقی عنصر کافی است ویژگی text-align
را در .inner
تغییر بدین. برای تغییر دادن مرکز عمودی هم باید ویژگی vertical-align
را در .inner
تغییر دهید.
نتیجهگیری
ممکن است در این مثال تعداد نشانه گذاری ها زیاد بنظر برسد، ولی بخشهایی که کار اصلی را انجام میدهند، سه div
با: کلاس .outer
، کلاس .inner
، و کلاس .centered
است و کد CSS برای آنها ثابت است بنابراین میتوانید آن را داخل قالب اولیه CSS تمام پروژه هاتون قرار داده و دیگر نگرانش نباشین.
در واقع این روش يك عنصر بيشتر از اكثر روش ها داشته و کاملا خلل ناپذیر است! من امیدروارم که این روش تبدیل به یک روش استاندارد شود و ما دیگر نگران مرکزسازی در CSS نباشیم.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post