arman100000

وسط قراردادن يك عنصر با css

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

من قبلا براي وسط قراردادن هر چيزي توي صفحه از تگ center استفاده ميكردم و مشكل كاملا حل ميشد ولي الان اين تگ منسوخ شده و به قولي بايد از css براي اينكار استفاده بشه با css هم مستقيما نميشه و بايد از اين دوتا كد همزمان استفاده بشه


margin-right:auto;margin-left:auto

ولي حتي با اينم مشكل من حل نشد و هيچ چيزي نميره وسط !

0

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


لینک به پست

اگه از این حالت می خواهید استفاده کنید، حتما باید به عنصر عرض بدید. یعنی مثلا:


.test{
margin-right:auto;margin-left:auto;
width:300px;
}

2

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


لینک به پست

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


margin:0 auto;

با این کد المان مورد نظر در وسط صفحه به صورت خودکار قرار می گیرد.

ویرایش شده در توسط سعید شعبانی
2

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


لینک به پست

یه مورد جالب هم اگر می خواهید که یه عنصر که دارای position هست روی در مرکز قرار بدید به صورت زیر باید عمل کنید:


.test{
position: absolute; /* ya fixed */
width: 300px;
left: 50%;
margin-left: -150px; /* دقیقا این مقدار باید نصف عرض عنصر باشد */
}

2

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


لینک به پست
یه مورد جالب هم اگر می خواهید که یه عنصر که دارای position هست روی در مرکز قرار بدید به صورت زیر باید عمل کنید:
 .test{ position: absolute; /* ya fixed */ width: 300px; left: 50%; margin-left: -150px; /* دقیقا این مقدار باید نصف عرض عنصر باشد */ } 

 margin:0 auto; 

با این کد المان مورد نظر در وسط صفحه به صورت خودکار قرار می گیرد.

اگه از این حالت می خواهید استفاده کنید، حتما باید به عنصر عرض بدید. یعنی مثلا:
 .test{ margin-right:auto;margin-left:auto; width:300px; } 

با عرض تشكر همه امتحان شده ولي عنصر مورد نظر وسط بيا نيست !

0

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


لینک به پست

دموی آنلاینی دارید؟

(همچنین عنصر اصلا نباید float بگیره)

0

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


لینک به پست

دموی آنلاینی دارید؟

(همچنین عنصر اصلا نباید float بگیره)

نه متاسفانه روي لوكال دارم تست ميكنم

float هم نداره

0

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


لینک به پست

آزمان عزیز با سرویس هایی مانند http://codepen.io یک دموی انلاین بسازید و لینکش را بدید تا چک کنیم.

0

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


لینک به پست

آزمان عزیز با سرویس هایی مانند http://codepen.io یک دموی انلاین بسازید و لینکش را بدید تا چک کنیم.

سعيد جان متاسفانه كارش زياده بخوام آنلاينش كنم چون بايد كل قالب رو پياده سازي كنم ...

كلا چه احتمالاتي هست براي كار نكردنش ؟ چون با تگ سنتر براحتي وسط مياد ...

0

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


لینک به پست

یک بار به جای اینکه مقدار اتوماتیک به مارجین بدید مقدار عددی بدید - آزمایش کردید؟

0

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


لینک به پست

یک بار به جای اینکه مقدار اتوماتیک به مارجین بدید مقدار عددی بدید - آزمایش کردید؟

بله قبلا امتحان كردم جلو مياد ولي مشكل اينجاست اين عنصر (قسمت صفحات سايت) عرض استاتيكي نداره و كافيه كه صفحات سايت زياد يا كم بشه و اين هم عوض ميشه ...

0

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


لینک به پست

به المان width مشخص بدید و بعد margin: 0 auto بدید.

3

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


لینک به پست

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

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

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

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


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

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

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


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