site

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

9 پست در این موضوع قرار دارد

سلام دوستان

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

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

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

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

17532142322630517304_556.png

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

36247142322630545454_557.png

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

نشد !

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

دمو آنلاین :

http://jsfiddle.net/jc1yr2gp/

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

سلام

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

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

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


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

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

ویرایش شده در توسط site
0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

اینکار رو کن

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

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری