چگونه می توان عناصر را در یک صفحه وب هماهنگ و شناور کرد

قرار دادن اقلام در یک صفحه وب برای طراحی کلی آن ضروری است. اگر چه روش های دیگر برای تاثیر گذاری بر طرح، مانند استفاده از جداول ( که ما توصیه نمی شودبهترین استفاده از CSS است .

در زیر، نگاهی به نحوه استفاده از یک سبک ساده CSS در خط برای کشیدن تصاویر، جداول، پاراگراف ها و موارد دیگر خواهیم داشت.

توجه: این روش های مشابه را می توان در ورق های سبک خارجی نیز استفاده کرد، اما از آنجایی که این موارد برای اقلام فردی اعمال می شود و به احتمال زیاد باید این کار را بکند، بهترین استفاده از یک ظاهر طراحی در خط همان چیزی است که در ذیل ذکر شده است.

تراز کردن پاراگراف های متن

برچسب پاراگراف، اولین مکان برای شروع صفحه وب شما است. باز کردن و بستن تگ ها شبیه به این هستند:

همبستگی پیش فرض متن در یک پاراگراف به سمت چپ صفحه است، اما شما همچنین می توانید پاراگراف های خود را به سمت راست و مرکز برسانید.

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

برای به دست آوردن بهترین اثر با یک پاراگراف، بهتر است عرض را در پاراگراف کوچکتر از عنصر container (parent) تنظیم کنید.

متن درون پاراگراف را تراز کنید

مسلما جالب ترين جايگزيني براي متن بندي "توجيه" است كه به مرورگر نشان مي دهد متن متناسب با هر دو طرف راست و چپ پنجره است.

برای توجیه متن در یک پاراگراف، از ویژگی text-align استفاده کنید.

شما همچنین می توانید تمام متن درون یک پاراگراف را به سمت راست یا چپ (به طور پیش فرض)، با استفاده از خصوصیت text-align، هماهنگ کنید.

خصوصیات text-align متن در داخل عنصر را ترتیب می دهد. از لحاظ فنی، تصور نمی شود تصاویری را که در داخل پاراگراف یا عنصر دیگر قرار دارند، ترتیب دهند، اما اکثر مرورگرها تصاویر را به صورت inline برای این ویژگی پردازش می کنند.

ترتیب تصاویر

با استفاده از مالکیت شناور در یک برچسب تصویر می توانید محل قرار دادن تصاویر روی صفحه و نحوه قرار دادن متن در اطراف آنها را تعیین کنید.

همانند پاراگراف بالا، ویژگی سبک شناور در برچسب تصویر تصویر شما را بر روی صفحه قرار می دهد و به مرورگر می گوید که چگونه متن و عناصر اطراف آن تصویر را جریان می دهد.

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

اگر می خواهم متن را متوقف کنم، در انتهای تصویر قرار می گیرم، از خصوصیات روشن استفاده می کنم:


تراز بیشتر از پاراگراف ها

با این حال، اگر میخواهید بیش از یک پاراگراف یا یک تصویر را ترجیح دهید، چه؟ شما می توانید به راحتی یک پارامتر سبک را در هر پاراگراف قرار دهید، اما یک برچسب وجود دارد که می توانید از آن استفاده کنید که موثر تر است:

به راحتی متن و تصاویر (از جمله تگ های HTML ) را با برچسب و ویژگی سبک (شناور یا خط متن) محاصره کنید و همه چیز در آن تقسیم می شود که چگونه آن را دوست دارید.

به یاد داشته باشید که ترازهای اضافه شده به پاراگرافها یا تصاویر درون بخش تقدیر و افتخار می شود، که برتری آن را تضمین می کند.