آموزش طراحی وب

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

در این مقاله قصد دارم نحوه ی جای گیری صحیح متن رو داخل یک تگ توضیح بدم .

align

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

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

align

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

 

کد CSS :

 

فقط کافیه توی 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

 

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

غدیره مرادی

طراح وب

دیدگاه ۱۰

  • خیلی وقتها text-align جواب میده ولی من دنبال جایگزینی برای vertical-align میگشتم برای تراز عمودی محتوا که این آموزش خیلی بهم کمک کرد.
    ممنونم

  • عالی بود من از یک روش خیلی خراب استفاده میکردم مثلا برای تراز عمودی از padding استفاده میکردم الان دارم به خودم میخندم ….

  • سلام.یک راه دیگه هم داره.میشه text-align:center و line-height را برابر ارتفاع دیوی که قراره متن داخل آن قرار بگیره داد.در این صورت متن در وسط دیو قرار میگیرد.

  • با سلام و عرض ادب و ارادت خدمت شما دوست عزیز

    بنده یه سوالی از شما داشتم.

    چند روزی هست که یک وبلاگی رو تو سیستم رزبلاگ ساختم.که فونت های اون (B yekan) میباشد.من میخواستم ببینم که میشه اونارو تبدیل به (فونت ب یکان اصلاح شده) تبدیل کرد.چون وقتی اندازه این فونت هارو زیاد میکنم.خیلی زشت میشن.اگه میشه در این مورد کمکم بکنید خیلی ممنون میشم.

    باتشکر

  • مطلب بسیار خوب و جامعی بود
    دمتون گرم
    انشاالله که همیشه همینطور با کیفیت بمونید

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین