تراز کردن (Align)
«تراز کردن (Align)» یعنی چیدن عنصرها در وسط یا کنار. گاهی افقی است، گاهی عمودی. ما با چند روش ساده جلو می رویم؛ مثل وسط چین کردن کارت در صفحه موبایل.
وسط چین کردن یک بلوک با margin:auto
برای بلوک ها از margin: auto استفاده کن. اما حتماً width بده تا کش نیاید.
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
<div class="center">این div وسط است.</div>
وسط چین کردن متن با text-align
برای متن داخل یک بلوک از text-align: center استفاده کن.
<style>
p {
text-align: center;
}
</style>
<p>این متن وسط چین است.</p>
وسط چین کردن تصویر با display و margin
عکس را بلوک کن و سپس چپ و راست را auto بده.
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
</style>
<img src="paris.jpg" alt="Paris" />
وسط چین همه جانبه با Flexbox
در فلکس، با justify-content و align-items مقدار center بده.
<style>
.center-flex {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
<div class="center-flex">کاملاً وسط هستم.</div>
وسط چین با Grid و place-items
در گرید، place-items: center ساده و تمیز کار می کند.
<style>
.center-grid {
display: grid;
place-items: center;
height: 200px;
border: 3px solid green;
}
</style>
<div class="center-grid">وسط عمودی و افقی هستم.</div>
تراز کنار راست با position:absolute
با position:absolute عنصر از جریان خارج می شود. بنابراین هم پوشانی ممکن است.
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}
</style>
<div style="position: relative;">
<div class="right">چسبیده به راست</div>
</div>
تراز راست با float
گاهی ساده ترین راه همان شناور (Float) است.
<style>
.right {
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
}
</style>
<div class="right">شناور در راست</div>
وسط چین انعطاف پذیر با transform
برای ابعاد ناشناخته، از translate در کنار absolute کمک بگیر.
<style>
.container {
height: 200px;
position: relative;
border: 3px solid green;
}
.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<p>وسطِ واقعی</p>
</div>
نکته: اگر از نمایش خطی-بلوک استفاده کردی، فاصله سفید بین تگ ها را مدیریت کن. برای مرور سریع اصول تراز کردن را به کار ببر.
جمع بندی سریع
- بلوک وسط؟ margin:auto و width ثابت.
- متن وسط؟ text-align:center.
- تصویر وسط؟ display:block و margin:auto.
- همه جانبه؟ Flex یا Grid.
- ابعاد نامعلوم؟ position + translate.