استفاده از CSS برای تعیین موقعیت افقی المان های بلاکی مثل جدول ها و تقسیم بندی های صفحه (تگ div)

معمولا دوستانی که در مورد چینش اشیاء مشکل داشتند ، بیشتر در مورد چینش جدول ها و تقسیم بندی های صفحه (تگ div) سوال می پرسیدند . در اینجا می خوایم روش درست و استاندارد انجام این کار رو براتون بگیم .

روش غیراستاندارد و غیر معمولی که بکار میره اینه که جدول ها و المان های بلاکی رو درون یک تگ دیگه قرار میدند و چینش تگ پدر رو تعیین می کنند تا محتوای درون اون رو به راست ، چپ یا وسط ببرند . این روش نادرسته و در بعضی از مرورگر ها پشتیبانی نمیشه .

:: برای این منظور باید از ویژگی های CSS برای همون تگی که می خوایم چینشش رو تعیین کنیم ، استفاده کنیم . برای راست چین و چپ چین کردن یک المان بلاکی باید از ویژگی float در CSS که به معنی شناور بودن هست در خود تگ استفاده کنیم . ویژگی float دو مقدار left و right رو می پذیره که باعث شناور شدن المان بلاکی در چپ یا راست میشه . به طور مثال در کدهای زیر جدول آورده شده به سمت راست صفحه منتقل میشه (محتواش راست چین نمیشه ، خودش به راست میره) و تگ div آورده شده در سمت چپ شناور میشه .

xxz

ر المان های بلاکی به صورت پیش فرض پهنای المان ۱۰۰ درصد هست . برای همین من با استفاده از ویژگی width مقدار ۲۰۰ پیکسل رو برای پهنای تگ جدول و div فوق تعیین کردم تا به چپ و راست رفتنشون مشخص باشه .

:: روش مرسوم و صحیح وسط چین کردن المان های بلاکی استفاده از ویژگی margin در CSS هست . ویژگی margin فاصله ی حاشیه ی یک تگ تا تگ پدرش (تگی که اون رو در بر داره) رو مشخص میکنه . شاید تعجب کرده باشید که چطور و چرا از این تگ برای وسط چین کردن المان بلاکی استفاده میشه ! خوب وقتی شما این فاصله رو از چپ و راست مقدار ۵۰ درصد قرار بدید ، در واقع یعنی اونو در وسط قرار دادید !

:: چون قصد دارم در آینده در مورد ویژگی margin و دو ویژگی padding و border در CSS یک مطلب مفصل بنویسم و تفاوت و کاربردهاشون رو بگم در اینجا مختصرا در مورد margin توضیح میدم . تگ margin چهار مقدار رو که با یک space از هم جدا میشن ، می پذیره که به ترتیب فاصله از بالا ، راست ، پایین و چپ تگ رو مشخص می کنه . به طور مثال در پاراگراف زیر فاصله از بالای پاراگراف ۱۰ پیکسل ، از راست ۷ پیکسل از پایین ۵ پیکسل و از چپ ۳ پیکسل هستش :

qqa

همونطور که گفتم شما میتونید به جای واحد pixel از درصد استفاده کنید . با قرار دادن مقدار ۵۰ درصد برای فاصله از چپ و راست ، المان رو به وسط میارید . همچنین برای انتقال یک المان بلاکی به وسط ، مرسوم هست که در تگ margin برای فاصله از بالا یک مقدار رو تعیین می کنند و به جای سه مقدار دیگه از کلمه ی auto استفاده می کنند . که اینکار به صورت پیشفرض فاصله از سه سمت دیگه رو ۵۰% در نظر میگیره .
همون تگ پاراگراف فوق رو با یکی از دو شیوه ی زیر با استفاده از تگ margin میشه به وسط منتقل کرد :

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

shh

ضمنا بر اساس طراحی تون می تونید به جای ۵۰ درصد از دو طرف ، از یک طرف مثلا ۳۰ درصد و از طرف دیگه ۷۰ درصد فاصله بدید . در این حالت شئ مورد نظر به سمتی که %۳۰ فاصله دادید مایل میشه !