وسط چین کردن عناصر مختلف با CSS — به زبان ساده

برای همه توسعه‌دهندگان مواردی پیش آمده است که لازم بوده عناصری را در CSS به صورت وسط‌چین تنظیم کنند. در این موارد معمولاً سعی می‌کنیم از راهنماهای آنلاین استفاده کنیم. این کار شاید در ابتدا ساده به نظر برسد؛ اما به مرور که عناصر و استایل‌های بیشتری را در صفحه وارد می‌کنید، سردرگمی زیادی ایجاد می‌کند.

از آنجا که این یک مشکل رایج است، در ادامه فهرستی از روش‌های وسط‌چین کردن عناصر مختلف در CSS را توضیح داده‌ایم. همچنین نمونه‌هایی عملی از هر یک از روش‌هایی که توضیح داده‌ایم ارائه شده است.

روش Text-Align

متد «text-align: center» احتمالاً رایج‌ترین روشی است که برای وسط‌چین کردن عناصر استفاده می‌شود. این روش غالباً به منظور وسط‌چین کردن متن در صفحه‌های HTML استفاده می‌شود؛ اما می‌توان از آن برای وسط‌چین کردن div ها نیز استفاده کرد.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

کد CSS مورد نیاز به صورت زیر است:

1.blue-square-container {
2  text-align: center;
3}
4
5.blue-square {
6  background-color: #0074D9;
7  width: 100px;
8  height: 100px;
9  display: inline-block;
10}

به این ترتیب یک مربع آبی مانند تصویر زیر به دست می‌آوریم:

نکته‌های زیر را می‌توان فهرست کرد:

1. آن div را که می‌خواهید وسط‌چین کنید با عنصر والدش بگنجانید (عنصر والد معمولاً به نام wrapper یا container شناخته می‌شود).
2. عنصر والد را به صورت «text-align: center» تنظیم کنید.
3. سپس درون div را به صورت «display: inline-block» تنظیم کنید.

در مثال مربوط به مربع آبی، آن را با div دیگری به نام «blue-square-container» محصور کرده‌ایم. جهت وسط‌چین کردن مربع آبی باید یک عنصر والد ایجاد کرده و مشخصه display مربع آبی را به صورت inline-block تنظیم کنید.

دلیل این امر آن است که به صورت پیش‌فرض مشخصه display یک div به صورت block تنظیم می‌شود یعنی کل عرض صفحه را می‌پوشاند. با تنظیم کردن مشخصه display مربع آبی، به صورت inline-block، مطمئن می‌شویم که مربع آبی تنها عرضی که تعیین شده یعنی 100px را پوشش می‌دهد.

افزودن چند عنصر فرزند درون عنصر والد (مربع‌های آبی در مثال فوق) باعث می‌شود همه آن‌ها وسط‌چین شوند.

روش Margin Auto

روش متداول دیگر برای وسط‌چین کردن عناصر در CSS، استفاده از متد Margin Auto است. با استفاده از این متد دیگر نیازی به عنصر والد وجود ندارد. در این روش تا زمانی که عرض تعریف شده‌ای وجود دارد، کافی است روی کادر زرد رنگ از مقدار «margin: 0 auto» استفاده کنیم. «margin: 0 auto» در واقع اختصاری برای تعیین حاشیه‌های بالا و پایین عنصر به صورت صفر و تنظیم حاشیه‌های راست و چپ به صورت خودکار است.

این حالت مهم است، زیرا بدون وجود عرض 100px که تعریف کرده‌ایم، مرورگر نخواهد توانست حاشیه‌های راست و چپ مورد نیاز برای وسط‌چین کردن کادر زرد رنگ را تشخیص دهد. اما با تعیین عرض، مرورگر به طور خودکار مقدار مناسب حاشیه را در دو سمت کادر زردرنگ تشخیص داده و اعمال می‌کند.

مقدار 0 تعیین شده در این روش را می‌توان برابر با هر میزان پیکسلی که برای حاشیه‌های بالا و پایین مورد نیاز است، تنظیم کرد. ترفند جالب دیگر این است که تنها یکی از سمت‌های حاشیه راست یا چپ را به صورت auto تنظیم بکنید و بدین ترتیب div را به سمت راست یا چپ صفحه انتقال دهید.

کد CSS مربوطه به صورت زیر است:

1.yellow-square {
2  background-color: #FFDC00;
3  width: 100px;
4  height: 100px;
5  margin: 0 auto;
6}

نتیجه کار چنین است:

روش Absolute Positioning

در روش Absolute Positioning هر عنصر را می‌توان روی هر بخش دلخواه از صفحه قرار داد؛ اما این روش یک عیب دارد. Absolute Positioning را از گردش کاری صفحه خارج می‌کنند. به همین جهت ممکن است در صورت عدم استفاده صحیح، موجب بروز همپوشانی عناصر شود.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

اگر بخواهیم به سادگی یک عنصر را به صورت افقی روی صفحه‌ای مانند مثال‌های قبلی تنظیم کنیم، باید سه مرحله را طی کنیم:

1. تعیین مشخصه position عنصر به صورت absolute
2. به‌کارگیری تنظیمات «left: 50%» روی عنصر
3. تعیین margin-left به میزان نصف عرض عنصر

ما در این مثال از یک مربع سبز استفاده کرده‌ایم. اندازه آن به همان مقدار مثال قبلی یعنی 100px خواهد بود. همان طور که مشاهده می‌کنید روی مربع سبزرنگ از تنظیمات position: absolute و applied left: 50% استفاده شده است. به این ترتیب به مرورگر اعلام می‌شود که لبه چپ را به میزان 50% به سمت راست حرکت دهد.

اما اگر اقدام به بازسازی این مثال بکنیم، نمی‌خواهیم لبه چپ در وسط باشد، بلکه می‌خواهیم میانه مربع با میانه صفحه همراستا باشد.

بدین ترتیب به گام آخر می‌رسیم. جهت همراستا ساختن همه چیز و افست کردن فضای اضافی، باید نیمی از عرض مربع سبز را margin-left بکنیم. این مقدار در مورد مثال ما 50px است. مهم نیست که عرض عنصر چه قدر است، چون همیشه از نصف حاشیه استفاده می‌کنیم. کد CSS به صورت زیر است:

1.green-square {
2  background-color: #3D9970;
3  width: 100px;
4  height: 100px;
5  position: absolute;
6  left: 50%;
7  margin-left: -50px;
8}

نتیجه مانند تصویر زیر خواهد بود:

روش Transform/Translate

تا به اینجای مقاله تمرکز ما روی وسط‌چین کردن عناصر در حالت افقی بوده است؛ در ادامه روش‌های قرار دادن عناصر دقیقاً در میانه صفحه را بررسی می‌کنیم. در ادامه می‌خواهیم مربع قرمز را هم به صورت افقی و هم عمودی وسط‌چین کنیم.

با این که در این روش نیز از absolute positioning و تعیین مقدار «left: 50%» استفاده می‌کنیم؛ اما دو خصوصت دیگر نیز وجود دارند که باید تنظیم کنیم.

با تعیین مشخصه top به میزان 50% به مرورگر اعلام می‌کنیم که لبه بالایی مربع قرمز ما را به صورت عمودی با میانه صفحه همراستا کند. اما مانند مثال قبل، نمی‌خواهیم لبه با مرکز همراستا باشد؛ بلکه می‌خواهیم مربع خود را دقیقاً در مرکز صفحه قرار دهیم. این همان جایی است که از مشخصه جدید به نام transform استفاده می‌کنیم.

کارهای جالب زیادی را می‌توان با استفاده از top انجام داد که شامل تغییر مکان، چرخش و مقیاس‌بندی انیمیشن می‌شود؛ اما در این مثال ما از translate استفاده می‌کنیم.

بنابراین مشخصه transform را به صورت «(transform: translate(-50%, -50%» تنظیم می‌کنیم. اینک مربع قرمز ما هم به صورت افقی و هم عمودی وسط‌چین شده است. در این روش صرف‌نظر از این که طول و عرض صفحه چه مقدار باشد، عنصر مورد نظر همواره در مرکز آن قرار می‌گیرد. این روش در طراحی‌های واکنش‌گرا به فراوانی استفاده می‌شود و مانند روش absolute positioning نیازمند تعریف حاشیه نیست.

کد CSS به صورت زیر است:

1.red-square {
2  background-color: #FF4136;
3  width: 300px;
4  height: 300px;
5  position: absolute;
6  left: 50%;
7  top: 50%;
8  transform: translate(-50%, -50%);
9}

نتیجه کار تصویری به شکل زیر است:

روش Flexbox

اگر با Flexbox آشنایی ندارید باید بگوییم که Flexbox یک ماژول طراح بندی است که روش‌های کارآمدتری برای زاویه‌بندی و قرار دادن عناصر روی صفحه ارائه می‌کند.

فیلم آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS در فرادرس

کلیک کنید

کد HTML

1<div class="purple-square-container">
2  <div class="purple-square"></div>
3</div>

کد CSS

1html,
2body {
3  height: 100%;
4}
5
6.purple-square-container {
7  height: 100%;
8  display: flex;
9  align-items: center;
10  justify-content: center;
11}
12
13.purple-square {
14  background-color: #B10DC9;
15  width: 300px;
16  height: 300px;
17}

نتیجه کار در زیر قابل مشاهده است:

برای وسط‌چین کردن عناصر با استفاده از Flexbox چهار گام زیر مورد نیاز هستند:

1. کانتینرهای HTML ،body و parent باید ارتفاع 100% داشته باشند.
2. در کانتینر والد، مشخصه display باید به صورت flex تنظیم شود.
3. مشخصه align-items روی کانتینر والد باید به صورت center تنظیم شود.
4. مشخصه justify-content روی کانتینر والد باید به صورت center تنظیم شود.

• با تعیین مشخصه display به صورت flex روی کانتینر والد، آن را به صورت flex تعریف می‌کنیم.
• با تعیین align-items به صورت center به مرورگر اعلام می‌کنیم که آیتم‌های children یا flex باید به صورت عمودی درون والد به صورت وسط‌چین قرار گیرند.
• Justify-content نیز همان کار را می‌کند؛ اما این بار آن را در جهت افقی انجام می‌دهد.

این روش بسیار مناسب است؛ چون هم واکنش‌گرا است و هم به محاسبه حاشیه‌ها نیازی ندارد.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی و توسعه پروژه های وب
• آموزش طراحی وب با CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش پروژه محور HTML و CSS
• آموزش CSS Flex — به زبان ساده
• کاربرد CSS Reset در طراحی وب

==