وسط چین کردن عناصر در css و جایگزین تگ center

وسط چین کردن عناصر با سی اس اس

در قدیم کافی بود شما از تگ <center> استفاده میکردید

در اچ تی ام تمام عناصر تحت شعاع این تگ وسط چین میشدند

این تگ کارایی زیادی داشت منتها طبق اخرین استاندارد اچ تی ام ۵ منسوخ شده هستش

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

در موارد جزئی این کد جوابگو هستش اگر شما فقط برای یک یا چند عنصر زیر مجموعه

از <center> استفاده میکردید میتونید کد زیر رو جایگزینش کنید

<p style=”text-align:center”>

در موارد کلی تر میتونید همین استایل رو به تگ دایو بدید مثل مورد زیر

<div style=”text-align:center”>

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

به اینصورت که بطور مثال

استایل کلاس ما

<style>.test1{text-align:center}</style>

<div class=”test1″>

اما گاهی پیش میادکه این راه ها هم نمیتونند عناصر زیر مجموعه مارو وسط چین کنند تکلیف چیه ؟

برای تگهای والد ما در css باید کمی کار بیشتر انجام بدیم

اگر میخواهید تگهای والد و کلی رو وسط چین کنید بطور مثال وقتی میخواید یک کادر درست کنید

و وسط قرار بگیره و تمام عناصر زیر مجموعش هم

از این خاصیت تبعیت کنند این کار و انجام میدیم

استایل و کد ما به اینصورت خواهد بود

<style>
.test2 {
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align:center
}
</style>

<div class=”test2″>

در باکسهایی که معمولا از position: استفاده میکنند وسط چین کردن ممکنه کمی شما رو اذیت کنه

اما اینکار هم در این نوع کد کارایی داره

استایل ما برای این مورد هم همونه دقیقا بعد از پستیشن استایل ما قرار میگیره

<style>
.test3 {
position:fixed;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align:center
}
</style>

<div class=”test3″>

حالا گاهی ما این کار هارو هم انجام میدیم ولی باز نمیشه چرا ؟؟

ببینید اول باید دقت کنید که تگی که بهش خاصیت وسط چین رو میدید باید تگ والد باشه

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

یعنی ممکنه تگ والد شما راست چین باشه یا براش خاصیت

margin تعریف شده باشه و نگذاره تگ زیر مجموعه شما وسط چین بشه

دقت کنید نمونه زیر اشتباه است

با اینکه تگ والد ما وسط چین هستش اما استایلها با هم تداخل پیدا میکنند

<style>
.test8 {
width: 320px;height:auto;
margin-left:auto;margin-right:auto;
text-align:center;
}
.test9 {
position: absolute;
bottom: 10px;left: 155px;
}
.test10 {
position: absolute;
bottom: 10px;
left: 155px;
}
</style>

<div class=”test8″> کلاس ۸
<div class=”test9″> کلاس ۹
<div class=”test10″> کلاس ۱۰
</div></div></div>

به مثال زیر دقت کنید استایل بالا را تصحیح کردیم

<style>
.test5{width: 320px;max-width: 90%;height: auto;margin-left:auto;margin-right:auto;text-align:center;background: #0f0}
.test6{text-align:left}
.test7{text-align:right}
</style>
<div class=”test5″>کلاس ۵ وسط چین خواهد شد
<div class=”test6″>کلاس ۶ چپ چین اما در محورر وسط
<div class=”test7″>کلاس ۷ راست چین اما در محورر وسط
</div></div></div>

برای درک بهتر موضوع نگاهی به آن می اندازیم

در حال حاظر خواهید دید که با اینکه هر دایو به سمتی اشاره دارد
اما در نهایت هنوز از تگ والد که وسط چین میباشد تبعیت میکنند

وسط چین خواهد شد

چپ چین اما در محور وسط

راست چین اما در محور وسط

و در پایین نمونه غلط این کد را که قبلا ذکر شده میبینید
کلاسهای ۸ و ۹ و ۱۰ همان کلاس اشتباه اولیه ما میباشند

کلاس ۸

کلاس ۹

کلاس ۱۰
با اینکه نوع چینش تگهای ما در اچ تی ام ال یکی بودند
اما ملاحظه کردید که بخاطر تفاوت در استایل نتیجه اصلا مشابه نبود
پس میتوان نتیجه گرفت که در وسط چین کردن یک لیست یا موضوع تنها تگ والد همیشه غالب نیست
پس اگر در وسط چین کردن عناصر به مشکل خوردیم لازم است نگاهی دقیقتر به استایل قالب خود بیندازیم

امید وارم بعد از مطالعه این پیج دیگه مشکل وسط چین کردن عناصر رو نداشته باشید

بهترین کدها

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

20 + یک =

کد ها و ابزار مهم سایت پرنده غریب