آیا باید یک عنصر HTML را در مرکز قرار دهید و مطمئن نیستید از کجا شروع کنید؟ این تکنیک ها را بررسی کنید.
خلاصه عناوین
- یک فایل HTML ساده برای تمرین مرکز سازی
- استفاده از Flexbox برای وسط یک عنصر Div
- استفاده از CSS Grid برای وسط یک عنصر Div
- استفاده از CSS Positioning برای وسط یک عنصر Div
تعاریف کلیدی
- مرکز دادن عناصر در طرح‌بندی وب همیشه یک چالش بوده است، اما CSS مدرن اکنون از موقعیت‌یابی مرکزی آسان پشتیبانی می‌کند.
- Flexbox پرکاربردترین روش برای متمرکز کردن عناصر است که یک مدل چیدمان انعطاف پذیر ارائه می دهد که امکان تراز آسان را فراهم می کند.
- CSS Grid و موقعیت‌یابی CSS نیز روش‌های مؤثری برای متمرکز کردن عناصر در یک صفحه وب هستند که کنترل دقیقی بر روی چیدمان و هم‌ترازی ارائه می‌دهند.
قرار دادن یک عنصر در طرح‌بندی وب چالشی است که همیشه طراحان را ناامید کرده است. انجام این کار همیشه آسان نبوده است، اما بسیاری از طرح ها نیاز به موقعیت مرکزی دارند. خوشبختانه، CSS مدرن اکنون پشتیبانی خوبی برای مرکز کردن دارد.
بیاموزید که چگونه یک div را به صورت افقی و عمودی با استفاده از موقعیت یابی Flexbox، CSS Grid و CSS در مرکز قرار دهید.
یک فایل HTML ساده برای تمرین مرکز سازی
نمونه‌های زیر همگی از یک سند HTML حداقلی برای نشان دادن مرکزیت با CSS استفاده می‌کنند. از این نشانه گذاری استفاده کنید و CSS را با توجه به هر بخش تغییر دهید تا ببینید این ویژگی ها چگونه رفتار می کنند.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
استفاده از Flexbox برای وسط یک عنصر Div
قبل از استفاده از Flexbox برای مرکزیت یک عنصر div، باید اصول اولیه آن را بدانید. خوشبختانه، Flexbox یک رویکرد ساده را دنبال می کند، به همین دلیل است که بیشترین استفاده را دارد. این یک مدل چیدمان منعطف ارائه می‌کند که تراز کردن و توزیع فضا بین اقلام موجود در یک ظرف را آسان می‌کند و آن را برای متمرکز کردن عناصر ایده‌آل می‌کند.
از CSS زیر برای رسیدن به مرکز با Flexbox استفاده کنید.
- عنصر div خود را در یک ظرف بپیچید. ویژگی display: flex را روی ظرف اعمال کنید تا طرح بندی Flexbox را فعال کنید. در یک مورد آزمایشی ساده، بدنه می‌تواند به عنوان یک ظرف عمل کند: body { display: flex;}
- از ویژگی های justify-content و align-item برای تراز کردن آیتم ها به ترتیب در امتداد محور اصلی (افقی) و محور متقاطع (عمودی) استفاده کنید. برای وسط هر دو محور، این ویژگی ها را در مرکز قرار دهید. برای یک نمایش ساده، باید ارتفاع بدنه را روی 100vh تنظیم کنید تا بتوانید اثر تراز عمودی را ببینید. body { justify-content: center; align-items: center;}
- به div یک رنگ پس‌زمینه بدهید تا محل قرارگیری آن را در صفحه نهایی تجسم کنید: div { background-color: red; }
body {
display: flex;
}
body {
justify-content: center;
align-items: center;
}
div { background-color: red; }
با مشاهده نتیجه در DevTools Google Chrome، می‌توانید ببینید که چگونه این دو ویژگی تراز را در امتداد هر محور کنترل می‌کنند:
استفاده از CSS Grid برای وسط یک عنصر Div
استفاده از CSS Grid برای مرکزیت یک عنصر روش موثر دیگری است که کنترل دقیقی بر روی چیدمان و تراز ارائه می دهد.
- یک ظرف برای چیدمان خود تعریف کنید و برای فعال کردن CSS Grid از style grid استفاده کنید. در این مورد، بدن به عنوان ظرف عمل می کند. بدنه { نمایش: شبکه؛}
- از ویژگی های grid-template-columns و grid-template-rows برای تعریف ساختار شبکه خود استفاده کنید. برای وسط، یک ستون و ردیف کافی است، بنابراین برای هر دو از 1fr استفاده کنید. body { grid-template-columns: 1fr; grid-template-rows: 1fr;}
- از ویژگی place-item برای مرکزیت محتویات شبکه، هم به صورت افقی و هم به صورت عمودی استفاده کنید. بدنه { place-items: center;}
- پس زمینه عنصر div خود را برای تجسم آن در مرکز محفظه شبکه طراحی کنید. div { background-color: آبی؛}
body {
display: grid;
}
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
body {
place-items: center;
}
div {
background-color: blue;
}
در این مورد، یک ویژگی واحد، محل مرکزی div را در صفحه شما کنترل می کند:
استفاده از CSS Positioning برای وسط یک عنصر Div
برای استفاده از ویژگی موقعیت CSS برای مرکزیت یک div، همچنین باید بدانید که چگونه CSS با انتقال‌ها تبدیل می‌شود. در اینجا یک راهنمای گام به گام با یک مثال آورده شده است.
- برای قرار دادن عنصر div، مطمئن شوید که ظرف آن موقعیت نسبی دارد. این یک زمینه موقعیت یابی نسبی ایجاد می کند، بنابراین می توانید div را در مرکز ظرف آن قرار دهید. بدن { وضعیت: نسبی؛}
- موقعیت مطلق را روی عنصر div اعمال کنید، سپس از ویژگی های بالا و چپ استفاده کنید تا گوشه سمت چپ بالای div را دقیقاً در مرکز ظرف آن قرار دهید. div { position: absolute; بالا: 50%; سمت چپ: 50%; transform: translate(-50%, -50%); background-color: green;} تبدیل translate(-50%, -50%) div را به اندازه نصف عرض و نیمی از ارتفاع آن به سمت چپ و به سمت بالا حرکت می دهد.
body {
position: relative;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
این روش بدین صورت عمل می کند که ابتدا گوشه بالایی عنصر را در مرکز قرار می دهد، سپس آن را به طور نسبی به اندازه نصف عرض و نیمی از ارتفاع آن حرکت می دهد.
Flexbox، CSS Grid، و موقعیت یابی CSS ابزارهای قدرتمندی هستند که می توانید از آنها برای متمرکز کردن عناصر در یک صفحه وب استفاده کنید. با Flexbox، می توانید فقط با چند خط کد به صورت افقی و عمودی در مرکز قرار دهید. CSS Grid هم ترازی قدرتمندی را در دو بعد فراهم می کند و می توانید از موقعیت یابی CSS برای مرکزیت یک عنصر نسبت به ظرف اصلی آن استفاده کنید.
با استفاده از این تکنیک ها، می توانید اطمینان حاصل کنید که صفحات وب خود تمیز و حرفه ای به نظر می رسند.