• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

وسط چین کردن والد عناصر inline در CSS

9 5161 ۱۵ اردیبهشت ۹۳

به نام خدا

با سلام خدمت همگی سون لرنیا.امیدوارم حالتون خوب باشه.امروز با یه ترفند بسیار کاربردی در سی اس اس باهاتون همراه هستم.

شاید خیلی شده که یک "دیو"ی داشتید و داخلش هم چند المنت دیگه داشتید که به اونها خاصیت float دادید یا display اونهارو به صورت inline یا inline-block قرار دادید.(معمولا به این چنین المنت هایی که داخلش المنت های دیگری وجود داره، container میگن.) خب وقتی خواستید container تون رو توسط margin: 0 auto; وسط چین کنید نمیشد؛ اگر  تا حالا به این مشکل برخورد کرده باشید میدونید که باید به container، عرض ( width) بدید تا container وسط چین بشه.

خب گاهی عرض container ما متغیر هست و المنت های داخل اون کم و زیاد میشه، خب در این مواقع باید چیکار کنیم؟ شاید بخواید با استفاده از جاوا اسکریپت مشکلتونو حل کنید ولی یه راه خیلی ساده ی دیگه ای هم وجود داره!

به نظرتون اون راه چی میتونه باشه؟! تا حالا به display مقدار table دادید؟

روش: به container ، خاصیت و مقدار display: table; رو میدیم.

نکته : تنها مرورگرهای IE 8 به پایین از مقدار table برای خاصیت display پشتیبانی نمیکنند.

خب برای اینکه کاملا با این روش آشنا بشید یک صفحه HTML رو به چند صورت استایل میدم تا نتایج رو ببینید.

HTML:

(کدهای HTML فقط همین ها هستند و هر بار تنها کدهای CSS رو تغییر میدیم.)

CSS:

توضیح: در این قسمت ما هنوز به خاصیت display مقدار table ندادیم.

خب حالا نتیجه:demo01

همونطور که دیدید عرض container برابر 100% شد و ارتفاعش هم برابر 0px !

CSS:

توضیح: در این بخش تنها خط 12 تغییر کرد.و حالا شاهد نتیجه باشید.

demo2

همونطور که میبینید در این بخش با تغییر خط 12، container توانست ارتفاع فرزندان خود رو تشخیص بده؛ اما هنوز هم عرضش برابر 100% هست.بنابراین هنوز هم نمیتونیم container رو وسط چین کنیم.

CSS:

در این بخش از روش خودمون استفاده کردیم، یعنی: خط 5 رو به display: table; تغییر دادیم.و حالا نتیجه:demo3

همونطور که دیدید عرض container به اندازه ی عرض فرزندانش شد و تونستیم با margin: 0 auto; اون رو وسط چین کنیم.

CSS: 

توضیح: این بار خط 12 رو تغییر دادیم و نتیجه باز هم مثل قبل بود. نتیجه:demo3

معمولا از این ترفند برای وسط چین کردن post meta data ها(یا همون اطلاعات پست، مثل بالای همین پست که اطلاعاتی چون نویسنده، تعداد نظرات، تعداد بازدید و ... داره) استفاده میکنن.

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

موفق باشید؛ یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 9 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    واقعا عالی و کاربردی بود ممنون

  • ‏‏

    من الان همین مشکل رو دارم اما با روشی که شما گفتید رفع نمیشه. ببینید من درست فهمیدم. به اون container که همون div باشه باید display table و برای li های لیست داخلی display inline-block.
    درسته؟

  • ‏‏

    ایا لینک دادن به مطلب و تصویر بصورت کوتاه مشکلی ایجاد میکنید

  • ‏‏

    متوجه نشدم میشه بیشتر توضیح بدید.
    ببخشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram