خصوصیت align-items در CSS-ملت وب 
دپارتمان ها
ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235916

آیا میدانستید دلیل اصلی محبوبیت ملت وب در چیست ؟ ملت وب به عنوان مرجعی پیشرو در پشتیبانی مشتریان خود توانسته رضایت کاربران را در برگیرد در واقع در ملت وب وب شخص پاسخگو نیاز های شما نیست در اینجا یک شرکت معتبر و پاسخگو در کنار مشتریان خود می باشد و تمام مسئولیت پشتیبانی بر عهده شرکت می باشد و نقطه قوت فوق العاده بالای برای یک وب سایت می باشد
خصوصیت align-items در CSS

خصوصیت align-items در CSS

خصوصیت align-items در CSS

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

align

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

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

کد CSS :

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

 

مرورگرهایی که این خصوصیت رو پشتیبانی می کنند :

FireFox 20.0+ , IE 11.0+ , Chrome 21.0+ , Opera 12+ , webkit

 

امیدوارم که این مقاله براتون مفید بوده باشه.
موفق باشید.

مطالبی که شاید خوشتان بیاد