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

[arman100000 1264]

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

margin-right:auto;margin-left:auto

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

[vahidd 203]

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

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

[سعید شعبانی 2047]

margin:0 auto;

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

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

[vahidd 203]

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

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

[arman100000 1264]

یه مورد جالب هم اگر می خواهید که یه عنصر که دارای 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; } 

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

[vahidd 203]

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

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

[arman100000 1264]

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

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

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

float هم نداره

[سعید شعبانی 2047]

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

[arman100000 1264]

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

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

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

[isk 4447]

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

[arman100000 1264]

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

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

[Morteza 34190]

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