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

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

خصوصیت 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

 

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

<<

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : غدیره مرادی

طراح وب

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • hassany

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

  • َابوالفضل

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

  • sensi2000

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

  • یاشار

    ممنون از آموزشهای خوب و کاربردیتون .
    منظور ازdisplay:flex چیه ؟

  • Ahmadreza57

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

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

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

    باتشکر

    • حسین همت یار

      سلام ، سوالات فقط در بخش پرسش و پاسخ جواب داده خواهد شد . تشکر

  • عابدین

    سلام :
    واقعا دستتون درد نکنه واقعا عالی بود

  • وبینه

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

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟