روش‌هایی برای وسط قرار دادن تگ div به کمک CSS

تگ دیو چیست و چرا می‌خواهیم آن را در مرکز قرار دهیم؟

یک تگ دیو یک عنصر بلاک مانند¹block-level عمومی HTML است. دیوها می‌توانند صفحه وب شما را به بخش‌هایی تقسیم کنند تا بتوانید آنها را با CSS هدف قرار دهید و استایل‌دهی مناسبی در خصوص آن‌ها به کارگیرید. به عنوان مثال, فرض کنید می‌خواهید یک المان نقل قول (تگ blockquote در HTML یا هر المان دیگری که برای نقل قول استفاده می‌کنید) را در پست وبلاگ خود قرار دهید که به جای اینکه مانند سایر متون در سمت چپ یا راست صفحه باشد، در مرکز قرار گیرد. در این حالت می‌توان متن را در یک تگ دیو قرار داد و CSS را به آن عنصر خاص اعمال کرد. متن‌های دیگر در صفحه بدون تغییر باقی می‌مانند.
درک نحوه در وسط قرار دادن دیوها و متن درون دیوها یک مهارت ارزشمند برای برنامه‌نویسان مبتدی است. این کار کمک می‌کند تا از گسترش محتوا به لبه‌های ظرف خود (المان دربرگیرنده محتوا)، همپوشانی با عناصر دیگر در صفحه یا سایر مسائلی که هنگام ایجاد طرح بندی صفحه وب ایجاد می‌شوند، جلوگیری شود. با این حال، وسط قرار دادن عناصر در HTML و CSS به سادگی زدن یک دکمه که روی آن متن center نوشته شده باشد، نیست. در واقع چندین راه برای انجام این کار وجود دارد که قرار است در ادامه به بررسی آن‌ها بپردازیم. اجازه دهید شروع کنیم.

نحوه وسط قرار دادن یک div در CSS

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

چگونه یک تگ div را به صورت افقی در وسط قرار دهیم؟

برای در مرکز قرار دادن یک تگ دیو به صورت افقی در یک صفحه کافی است اقدام‌های زیر صورت پذیرد:

• به آن یک کلاس CSS مانند center بدهید.
• در کد CSS خود، انتخابگر center. خود را تایپ کنید و آکولادهای مربوط به استایل‌دهی را برای آن ایجاد کنید.
• عرض عنصر را با واحد درصد یا پیکسل تنظیم کنید، یعنی مثلاً به صورت ;width: 50% یا ;width: 500px کدنویسی کنید.
• ویژگی حاشیه را روی خودکار²auto تنظیم کنید. به این ترتیب، تگ دیو هر عرضی را که در CSS مشخص شده است، اشغال می‌کند و مرورگر فضای باقی مانده را به طور مساوی بین حاشیه های دو طرف تقسیم می‌کند.

اجازه دهید به یک مثال ساده از CSS در اینجا بپردازیم. به عنوان مثال می‌خواهید یک تگ دیو را که دارای یک پاراگراف کوتاه در داخل خود هست، ایجاد کنید. در اینجا، کلاس center را به تگ دیو داده‌ایم و مقدار حاشیه را به صورت خودکار تنظیم کرده‌ایم:

See the Pen
Learnblog-codes1 by hamid (@davoodi68)
on CodePen.

توجه داشته باشید که حاشیه³margin با پدینگ⁴padding متفاوت است. پدینگ برای ایجاد فاصله بین مرز تگ دیو و پاراگراف درون تگ دیو (عناصر درونی) استفاده می‌شود. اگر در این زمینه اطلاعات شما کامل نیست، بهتر است ابتدا به یادگیری مباحث مقدماتی تر CSS بپردازید.

چگونه یک تگ div را به صورت عمودی در وسط قرار دهیم؟

برای در وسط قرار دادن یک تگ دیو به صورت عمودی در یک صفحه، می‌توانید از ویژگی position در CSS و همچنین ویژگی‌های top و transform استفاده کنید. اقدام‌های لازم برای این کار به قرار زیرند:

• به تگ دیو یک کلاس CSS مانند center بدهید.
• در کد CSS خود، انتخابگر center. خود را تایپ کنید و آکولادهای مربوط به استایل‌دهی را برای آن ایجاد کنید.
• ویژگی position را برای تگ دیو خود را به صورت مطلق⁵absolute تنظیم کنید تا از جریان و لی‌اوت عادی سند خارج شود.
• ویژگی top را روی %50 تنظیم کنید. این کار به مرورگر می‌گوید که لبه بالایی تگ دیو را با مرکز صفحه (یعنی 50 درصد پایین صفحه) به صورت عمودی تراز کند.
• سپس، ویژگی transform را برابر translate(0, -50%) تنظیم کنید.

ممکن است بتوانیم آخرین مرحله را نادیده بگیریم، اما مشکل اینجاست: قرار دادن لبه بالایی تگ دیو در وسط صفحه، آن را به صورت کامل از لحاظ عمودی در مرکز قرار نمی‌دهد. شما باید آخرین ویژگی (transform) را تعریف کنید تا این اتفاق رخ دهد.

See the Pen
Learnblog-codes1-How-to-Center-a-Div-Vertically by hamid (@davoodi68)
on CodePen.

چگونه یک تگ div را هم به صورت افقی و هم عمودی در وسط قرار دهیم؟

برای قرار دادن یک تگ دیو به صورت افقی و عمودی در وسط یک صفحه، می توانید تقریباً همان مراحل ذکر شده در بخش بالا را دنبال کنید. باز هم شما از ویژگی های position و top و transform استفاده خواهید کرد. تنها تفاوت این است که در این حالت شما همچنین از ویژگی left نیز برای در وسط قرار دادن از لحاظ افقی، استفاده خواهید کرد. مراحل انجام کار به شکل زیر است:

• به تگ دیو یک کلاس CSS مانند center بدهید.
• در کد CSS خود، انتخابگر center. خود را تایپ کنید و آکولادهای مربوط به استایل‌دهی را برای آن ایجاد کنید.
• ویژگی position را برای تگ دیو خود را به صورت مطلق تنظیم کنید تا از جریان و لی‌اوت عادی سند خارج شود.
• ویژگی‌های top و left هر دو را روی %50 تنظیم کنید. این کار به مرورگر می‌گوید که لبه‌های بالایی و چپ تگ دیو را با مرکز صفحه به صورت عمودی و افقی تراز کند.
• ویژگی transform را برابر translate(-50%, -50%) تنظیم کنید. با این کار تگ دیو 50 درصد به سمت چپ و 50 درصد نیز به سمت بالا حرکت می کند و در نتیجه مرورگر می‌تواند مرکز دیو را در مرکز صفحه قرار دهد.

See the Pen
Learnblog-codes1-How-to-Center-a-Div-Horizontally-and-Vertically by hamid (@davoodi68)
on CodePen.

چگونه یک تگ div را در داخل یک تگ div دیگر در وسط قرار دهیم؟

سه راه برای در مرکز قرار دادن یک تگ دیو در داخل یک تگ دیو دیگر وجود دارد. با هر روش، می‌توانید تگ دیو داخلی را در تگ دیو خارجی⁶parent به صورت افقی، عمودی یا هر دو در وسط قرار دهید.

روش اول: استفاده از ویژگی های left ،top ،position و margin

برای در وسط قرار دادن یک تگ دیو به صورت افقی و عمودی در یک تگ دیو دیگر در یک صفحه، در صورتی که میزان عرض و ارتفاع دیوها را بدانید، می‌توانید از ویژگی‌های left ،top ،position و margin استفاده کنید. در زیر مراحل مربوط به آن ذکر شده است:

• در کد HTML خود یک تگ دیو را در داخل یک تگ دیو دیگر قرار دهید. به تگ دیو درونی یک کلاس مانند child و تگ دیو بیرونی یک کلاس مانند parent بدهید.
• در کد CSS خود برای کلاس parent. آکولادهای استایل‌دهی را ایجاد کنید.
• برای تگ دیو بیرونی ارتفاع و عرض (مثلاً 300px در 300px) تنظیم کنید، سپس ویژگی position آن را برابر relative مقداردهی کنید.
• اکنون می‌توانید به استایل‌دهی تگ دیو درونی بپردازید. پس آکولادهای استایل‌دهی را برای کلاس child. ایجاد کنید.
• برای تگ دیو درونی ارتفاع و عرض (مثلاً 100px در 100px) تنظیم کنید، سپس ویژگی position آن را برابر absolute مقداردهی کنید.
• در گام بعد ویژگی‌های top و left هر دو را روی %50 تنظیم کنید. این کار به مرورگر می‌گوید که لبه‌های بالایی و چپ تگ دیو درونی را با مرکز المان دربرگیرنده آن به صورت عمودی و افقی تراز کند.
• در گام آخر کافی است ویژگی margin را به صورت 50px 0 0 -50px- مقداردهی کنید. با این کار نصف طول و عرض المان درونی به کمک ویژگی margin جبران می‌شود و در نتیجه این المان کاملا در مرکز المان بیرونی خود قرار می‌گیرد.

See the Pen
Learnblog-codes1-How-to-Center-a-Div-Within-a-Div by hamid (@davoodi68)
on CodePen.

روش دوم: استفاده از ویژگی های left ،top ،position و transform

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

See the Pen
Learnblog-codes1-How-to-Center-a-Div-Within-a-Div-method2 by hamid (@davoodi68)
on CodePen.

روش سوم: استفاده از ویژگی flexbox در CSS

به کمک ویژگی flexbox در CSS نیز می توانید یک تگ دیو را درون تگ دیو دیگر در وسط قرار دهید. خوبی این روش در آن است که دیگر نیازی به محاسبات مربوط به margin ندارد. مراحل کار در این روش به شکل زیر است:

• در کد CSS خود، المان‌های html و body را در نظر گرفته و مقدار ویژگی height را برای آنها برابر %100 تنظیم کنید (توجه: اگر می خواهید کل نمای دید صفحه را اشغال کنید، می‌توانید ارتفاع المان اصلی (المان parent) را نیز روی %100 تنظیم کنید. اما در این مثال ارتفاع آن روی مقدار معین و مشخصی تنظیم شده است.).
• در کد HTML خود یک تگ دیو را در داخل یک تگ دیو دیگر قرار دهید. به تگ دیو درونی یک کلاس مانند child و تگ دیو بیرونی یک کلاس مانند parent بدهید.
• در کد CSS خود برای کلاس parent. آکولادهای استایل‌دهی را ایجاد کنید.
• مقدار ویژگی height را برای تگ دیو بیرونی برابر مثلاً 200px تنظیم کنید.
• همچنین مقدار ویژگی display را برابر flex تنظیم کنید. این کار باعث می‌شود که المان بیرونی شما به عنوان یک نگه دارنده⁷container یا المان دارای قابلیت flex شناخته شود.
• کد دیگری که باید در بخش مربوط به المان بیرونی اضافه شود آن است که مقدار ویژگی‌های align-items و justify-content هر دو، برابر center تنظیم شوند. این کار به مرورگر می‌فهماند که المان درونی این المان را چه از لحاظ عمودی و چه از لحاظ افقی در وسط آن قرار دهد.
• تا اینجا ما به هدف خود رسیده‌ایم، اما بهتر است که به تگ دیو درونی نیز استایل بدهیم. لذا برای کلاس child. آکولادهای استایل‌دهی را ایجاد کنید.
• بعد از آن مقدار ویژگی‌های height و width را برای این تگ دیو درونی تنظیم کنید (مثلاً 100px در 100px).

See the Pen
Learnblog-codes1-How-to-Center-a-Div-Within-a-Div-method3 by hamid (@davoodi68)
on CodePen.

چگونه یک متن را درون یک تگ div در وسط قرار دهیم؟

به کمک CSS، می‌توانید متن را به روش‌های مختلفی در یک تگ دیو در وسط قرار دهید. رایج‌ترین راه، استفاده از ویژگی text-align برای در مرکز قرار دادن متن به صورت افقی است. راه دیگر استفاده از ویژگی‌های line-height و vertical-align است. راه نهایی دیگری هم مشابه حالت‌های قبلی وجود دارد که همان استفاده از ویژگی flex در CSS است. با استفاده از این روش، می‌توانید متن را به صورت افقی، عمودی یا هر دو، در مرکز قرار دهید.

چگونه یک متن را درون تگ div به صورت افقی در وسط قرار دهیم؟

به طور کلی می‌توان دو راه برای اینکه متن درون یک تگ دیو را به صورت افقی در وسط قرار دهیم، متصور بود. در ادامه به بررسی هر یک از این دو راه می‌پردازیم.

روش اول: استفاده از ویژگی text-align

فرض کنید می‌خواهید یک تگ دیو با یک پاراگراف کوتاه در داخل آن ایجاد کنید. در بیشتر موارد، می‌توانید متن را به صورت افقی در یک تگ دیو با استفاده از ویژگی text-align و دادن مقدار center به این ویژگی در وسط قرار دهید. مراحل کار به این صورت است:

• به تگ دیو مربوطه یک کلاس به نام مثلاً center بدهید.
• در کد CSS انتخابگر center. را تایپ کرده و آکولادهای استایل‌دهی را برای آن ایجاد کنید.
• بعد از آن ویژگی text-align را به صورت center مقداردهی کنید.

See the Pen
Learnblog-codes1-How-to-Center-Text-in-Div-Horizontally-method1 by hamid (@davoodi68)
on CodePen.

روش دوم: استفاده از ویژگی justify-content

برای به کارگیری روش اول یک استثناء وجود دارد که در آن حالت نمی‌توان از این روش استفاده نمود. این استثناء زمانی است که تگ دیو مورد نظر دارای ویژگی display و مقدار flex برای این ویژگی باشد. در این حالت باید از ویژگی justify-content به جای text-align برای در وسط قرار دادن متن استفاده کرد. مراحل کار به شکل زیر است:

• به تگ دیو مربوطه یک کلاس به نام مثلاً center بدهید.
• در کد CSS انتخابگر center. را تایپ کرده و آکولادهای استایل‌دهی را برای آن ایجاد کنید.
• برای اینکه به تگ دیو قابلیت flex بدهید، باید ویژگی display را برای این تگ به کار برده و مقدار آن را برابر flex تنظیم کنید.
• مقدار ویژگی justify-content را نیز برابر center قرار دهید.

See the Pen
Learnblog-codes1-How-to-Center-Text-in-Div-Horizontally-method2 by hamid (@davoodi68)
on CodePen.

چگونه یک متن را درون تگ div به صورت عمودی در وسط قرار دهیم؟

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

روش اول: استفاده از ویژگی padding

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

• به تگ دیو مربوطه یک کلاس به نام مثلاً center بدهید.
• در کد CSS انتخابگر center. را تایپ کرده و آکولادهای استایل‌دهی را برای آن ایجاد کنید.
• مقدار ویژگی padding را به صورت 50px 0 تنظیم کنید.

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

See the Pen
Learnblog-codes1-How-to-Center-Text-in-Div-Vertically-method1 by hamid (@davoodi68)
on CodePen.

روش دوم: استفاده از ویژگی line-height

معمولاً به کمک ویژگی line-height نیز می‌توانید متن درون یک تگ دیو را از لحاظ عمودی در وسط قرار دهید. برای این کار کافی است در کد HTML خود درون تگ دیو، یک تگ پاراگراف ایجاد کرده و سپس ویژگی‌های line-height و height را برای تگ دیو ذکرشده با مقدار یکسانی مقداردهی نمایید. مراحل کار به شکل زیر است:

• به تگ دیو مربوطه یک کلاس به نام مثلاً center بدهید.
• در کد CSS انتخابگر center. را تایپ کرده و آکولادهای استایل‌دهی را برای آن ایجاد کنید.
• ویژگی‌های line-height و height را برای تگ دیو ذکرشده با مقدار یکسانی مقداردهی نمایید (ما در این مثال از مقدار 150px برای آنها استفاده کرده‌ایم).
• به سراغ انتخابگر p در فایل CSS خود بروید و مقدار ویژگی display را برای آن به صورت inline-block تنظیم کنید.
• همچنین برای این المان ویژگی line-height را به شکل normal و ویژگی vertical-align را به شکل middle مقداردهی کنید. با این کار می‌توانید اطمینان حاصل کنید که چه متن درون تگ دیو تک‌خطی باشد و چه تا چندین سطر ادامه داشته باشد، در هر صورت از لحاظ عمودی در مرکز قرار می‌گیرد.

See the Pen
Learnblog-codes1-How-to-Center-Text-in-Div-Vertically-method2 by hamid (@davoodi68)
on CodePen.

روش سوم: استفاده از ویژگی align-items

اگر برای تگ دیو موردنظر از ویژگی display استفاده کرده باشید تا خاصیت flex به آن بدهید، دیگر روش‌های فوق برای در وسط قرار دادن عمودی متن، کارساز نخواهند بود. در چنین حالتی می‌توانید از ویژگی align-items استفاده کرده و مقدار آن را برابر center تنظیم کنید. مراحل کار به شکل زیر است:

• به تگ دیو مربوطه یک کلاس به نام مثلاً center بدهید.
• در کد CSS انتخابگر center. را تایپ کرده و آکولادهای استایل‌دهی را برای آن ایجاد کنید.
• برای تگ دیو موردنظر مقدار ویژگی display را برابر flex تنظیم کنید.
• به جهت اینکه بتوانید به وضوح ببینید که متن درون تگ دیو از لحاظ عمودی در وسط قرار گرفته است، باید مقداری به ویژگی height مربوط به این تگ بدهید (ما در اینجا مقدار 150px داده‌ایم). در غیر این صورت، تگ دیو تنها به اندازه متن درون خود ارتفاع خواهد گرفت.
• نهایتا مقدار ویژگی align-items را برابر center تنظیم کنید تا کار به پایان برسد.

See the Pen
Learnblog-codes1-How-to-Center-Text-in-Div-Horizontally-method3 by hamid (@davoodi68)
on CodePen.

جمع‌بندی

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

پاورقی:

• 1
  block-level
• 2
  auto
• 3
  margin
• 4
  padding
• 5
  absolute
• 6
  parent
• 7
  container