ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

آیا میدانستید دلیل اصلی محبوبیت ملت وب در چیست ؟ ملت وب به عنوان مرجعی پیشرو در پشتیبانی مشتریان خود توانسته رضایت کاربران را در برگیرد در واقع در ملت وب وب شخص پاسخگو نیاز های شما نیست در اینجا یک شرکت معتبر و پاسخگو در کنار مشتریان خود می باشد و تمام مسئولیت پشتیبانی بر عهده شرکت می باشد و نقطه قوت فوق العاده بالای برای یک وب سایت می باشد
فروش محصولات
فروش محصولات شما
خصوصیت 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

 

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

حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 591
تعداد دانلود : 0
تاریخ ۱۳۹۵-۱۱-۱۰
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد
سلام! ما 26 محصول رایگان در بخش آموزش css داریم اگر قصد بازدید دارید روی لینک سبز رنگ روبرو بزن بریم