خصوصیت align-items

فرض کنید یک تگ Div داریم که میخوایم متن Hello word رو در مرکز این تگ قرار بدیم :

برای انجام اینکار خیلی ها استفاده از خصوصیات text-align و vertical-align رو به ما پیشنهاد می دهند که خب این دو خصوصیت همیشه و به طور کامل به داد ما نمیرسه و پاسخ گوی نیاز ما نیستن اما یک راه خیلی ساده و سریع برای انجام اینکار استفاده از سه خصوصت Display و align-items و justify-content است که توضیحات کامل در ادامه به همراه کد نمایش داده خواهد شد.

کد اچ تی ام ال

<div class="wrapper">
<div class="main_content">click here</div>
</div>

کد سی اس اس

.wrapper {
width: 400px;
height: 400px;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
}
.main_content {
padding: 2px 5px;
background: #fafcc5;
border: 1px solid #d6d898;
width: 150px;
text-align: center
}

فقط کافیه توی Div اصلی به اسم Wrapper مقادیر display:flex و align-items:center و justify-content:center رو قرار بدیم تا مقادیر داخل div هم به صورت افقی و هم به صورت عمودی در وسط قرار گرفته شوند.

مقادیر دیگر خصوصیت align-items به صورت زیر هست :

stretch: مقدار پیش فرض است و به تناسب تگ خارجی کشیده می شود
center: اطلاعات به وسط قرار می گیرند.
flex-start: اطلاعات ابتدای tag مورد نظر قرار می گیرند.
flex-end :اطلاعات انتهای tag مورد نظر قرار می گیرند.
baseline: جایگیری آیتم ها به نسیت یکدیگر رخ می دهند.