سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

سبد خرید خالی می باشد
مبلغ کل
0
تسویه حساب

خصوصیت align-items در CSS
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 600353
تعداد کل مطالب : 1203

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

تعداد دانلود:
0
تعداد بازدید:
942
تاریخ:
۱۳۹۵-۱۱-۱۰
دسته بندی:

هشتگ ها :

#

در این مقاله قصد دارم نحوه ی جای گیری صحیح متن رو داخل یک تگ توضیح بدم .
فرض کنید یک تگ 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

 

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

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi