خصوصیت align-items

خصوصیت align-items

 7 سال قبل

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

35579790314069989203

برای انجام اینکار خیلی ها استفاده از خصوصیات 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: جایگیری آیتم ها به نسیت یکدیگر رخ می دهند.

تو پیشگامیت، میتونی سوالات رو بپرسی و هم میتونی مطلب منتشر کنی.

پیشگام پلاس   پرسش و پاسخ
ارسال دیدگاه