رفتن به مطلب

درخواست بهترین کد برای وسط چین


پست های پیشنهاد شده

سلام دوستان

من میخواهم مثلا یک شکل ، یک عکس ، فونت آیکونی یا هر چیز دیگه ای رو که در درون یک شی هستند ، وسط چین کنم

من از margin و padding برای اینکار استفاده می کنم اما جواب نمیده !!

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

عکس زیر رو نگاه کنید که وسط چین شده :

17532142322630517304_556.png

اما عکس زیر رو نگاه کنید که همون فونت آیکون هست و با همون سایز :

36247142322630545454_557.png

بهترین کد از نظر شما چیست که با همه مرورگر ها سازگار باشه ؟

نظر شما برای وسط چین کردن چیست ؟

لینک به ارسال

کد مورد نظر رو آنلاین بذارید (بهترین حالت اتوماتیک هست Margin:0 auto; ولی بستگی به کدنویسی داره)

لینک به ارسال

کد مورد نظر رو آنلاین بذارید (بهترین حالت اتوماتیک هست Margin:0 auto; ولی بستگی به کدنویسی داره)

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

الان فرض کنید که می خواهیم یک شی را هم از بالا پایین و هم از چپ و راست در وسط قرار بگیره

باید چیکار کرد ؟

لینک به ارسال

به تگ آیکن float:right و margin:20px بده. بعدش به اون باکس داخلی (همون که آیکن داخلشه) width:auto و float:right بده حل میشه.

لینک به ارسال

به تگ آیکن float:right و margin:20px بده. بعدش به اون باکس داخلی (همون که آیکن داخلشه) width:auto و float:right بده حل میشه.

نشد !

آقا به جای فونت آیکون یدونه عکس گذاشتم

دمو آنلاین :

http://jsfiddle.net/jc1yr2gp/

لینک به ارسال

line height اون رو برا بر با ارتفاع عنصر والد اون قرار بدین.

سلام

ببخشید متوجه نشدم

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

یک کدی هست به صورت زیر :


display: flex;
align-items: center;
justify-content: center;

اما مرورگر های قدیمی این کد بالا رو پشتیبانی نمی کنند !!!

ویرایش شده توسط site
لینک به ارسال

از دوستان عزیز کسی نظری نداره ؟

اینکار رو کن

margin-left: auto;
margin-right: auto;
display: block;
text-align: center;

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...