تصاویر مرکز، متن و بلوک عناصر هنگام ساخت وب سایت
اگر شما یاد می گیرید که چگونه وب سایت ها را ایجاد کنید ، یکی از رایج ترین ترفندهای که باید به کارشناسی ارشد بدهید این است که چگونه موارد را در پنجره مرورگر متمرکز کنید. این می تواند به معنای مرکزی کردن یک تصویر در صفحه باشد یا این می تواند به عنوان بخشی از طرح متن به عنوان توجیه مرکزی مانند سرفصل ها باشد.
روش مناسب برای رسیدن به این تصویر بصری از تصاویر محور یا متن یا حتی کل صفحه وب شما با استفاده از CSS (Cascading Style Sheets) است . بسیاری از خواص برای تمرکز در CSS از نسخه 1.0 بوده و با CSS3 و مرورگرهای وب مدرن کار می کنند .
مانند بسیاری از جنبه های طراحی وب، چندین روش برای استفاده از CSS به عناصر مرکزی در یک صفحه وب وجود دارد. اجازه دهید نگاهی به برخی از روش های مختلف برای استفاده از CSS برای دستیابی به این دید بصری.
در بررسی استفاده از CSS به عناصر مرکز در HTML
تمرکز با CSS می تواند یک چالش برای شروع طراحان وب باشد، زیرا راه های مختلفی برای انجام این سبک بصری وجود دارد. در حالی که انواع روش ها ممکن است توسعه دهندگان وب خوب یا چاشنی باشند که می دانند که تمام تکنیک ها بر روی هر عنصر کار نمی کنند، این می تواند برای حرفه ای وب جدیدتر به چالش بکشد، زیرا روش های متنوعی به این معنی است که آنها باید بدانند که چه زمانی از این رویکرد استفاده شود. بهترین کاری که باید بکنید این است که درک چند روش را بدست آورید. همانطور که شما شروع به استفاده از آنها می کنید، یاد خواهید گرفت که کدام روش بهترین کار را در چه مواردی انجام دهد.
در سطح بالا می توانید از CSS استفاده کنید:
- متن مرکز
- یک عنصر سطح بلوک (مانند یک بخش)
- مرکز تصویر
- عمودی یک بلوک یا یک تصویر را متمرکز کنید
بسیاری از (سالها پیش)، طراحان وب میتوانند از عنصر
متمرکز کردن متن با CSS
ساده ترین راه برای تمرکز بر یک صفحه وب متن است. این تنها یک ویژگی سبک است که باید این کار را انجام دهید: متن-align. سبک CSS زیر را وارد کنید، به عنوان مثال:
p.center {text-align: center؛ }
با استفاده از این خط CSS، هر پاراگراف نوشته شده با کلاس مرکزی می تواند به صورت افقی درون عنصر اصلی آن قرار گیرد. به عنوان مثال، اگر پاراگراف در داخل یک تقسیم بود، به این معنی که آن یک کودک از آن تقسیم بود، آن را به صورت افقی در داخل
در اینجا یک مثال از این کلاس اعمال شده در سند HTML:
این متن محور است
هنگام متمركز كردن متن با ويژگی text-align، به یاد داشته باشید كه در عنصر حاوی محور مرکزی قرار دارد و لزوما در داخل صفحه كاملا متمركز نخواهد بود. همچنین به یاد داشته باشید که متن محرمانه متمرکز برای بلوک های بزرگ محتوا دشوار است، بنابراین از این سبک به اندازه کافی استفاده کنید. سرفصل ها و بلوک های کوچکی از متن، مانند متن تیزر برای یک مقاله یا محتوای دیگر، اغلب آسان به نظر می رسد و زمانی که در مرکز قرار دارد، خوب است، اما بلوک های بزرگتر متن، مانند مقاله کامل، چالش برانگیز است اگر محتوا کاملا مرکزی باشد تعدیل شده. به یاد داشته باشید، وقتی که به متن وبسایت می آید، خوانایی همیشه کلید است !
محور کردن محتویات محتوا با CSS
بلوک ها هر عنصر در صفحه شما دارای یک عرض تعریف شده و به عنوان یک عنصر سطح بلوک ایجاد می شوند. اغلب این بلوک ها با استفاده از المان HTML
div.center {
حاشیه: 0 خودکار؛
عرض: 80 دقیقه؛
}
این اصطلاح CSS برای دارایی حاشیه حاشیه بالا و پایین را به مقدار 0 تنظیم می کند، در حالی که چپ و راست از "خودکار" استفاده می کنند. این اساسا هر فضای موجودی را که در دسترس است قرار می دهد و آن را به طور مساوی بین دو طرف پنجره نمایشگر تقسیم می کند و به طور موثری بر روی عنصر در صفحه تمرکز می کند.
در اینجا در HTML استفاده می شود:
اما متن داخل آن هم تراز شده است.
تا زمانی که بلوک شما دارای یک عرض تعریف شده باشد، آن را در داخل عنصر حاوی خود قرار خواهد داد. متن موجود در آن بلوک در آن محور نخواهد بود، اما توجیه پذیر خواهد بود. این دلیل آن است که متن به صورت پیش فرض در مرورگرهای وب به صورت چپ مواجه شده است. اگر می خواستید متن متناسب با آن باشد، می توانید از ویژگی های text-align که پیش از این در رابطه با این روش استفاده کرده اید، به مرکز تقسیم بروید.
مرکز تصاویر با CSS
در حالی که اکثر مرورگر تصاویر با استفاده از همان ویژگی متنی که قبلا در پاراگراف مورد بررسی قرار گرفته است، تصاویر را محور قرار می دهد، ایده خوبی برای این روش نیست، زیرا W3C توصیه نمی شود. از آنجایی که توصیه نمی شود، همیشه احتمال وجود دارد که نسخه های آینده مرورگرها می توانند این روش را نادیده بگیرند.
به جای استفاده از align-text به مرکز تصویر، باید به صراحت به مرورگر بگویید که تصویر یک عنصر سطح بلوک است. به این ترتیب، می توانید آن را به عنوان هر بلوک دیگری متمرکز کنید. CSS این است که این اتفاق می افتد:
img.center {
نمایش: بلوک؛
حاشیه سمت چپ: خودکار؛
حاشیه سمت راست: خودکار؛
}
و در اینجا HTML است که برای تصویری که می خواهیم محور باشیم:
شما همچنین می توانید اشیاء را با استفاده از CSS درون خطی متمرکز کنید (نگاه کنید به زیر)، اما این روش توصیه نمی شود، زیرا سبک های بصری را به نشانه HTML خود اضافه می کند. به یاد داشته باشید، ما میخواهیم سبک و ساختار را جدا کنیم، بنابراین اضافه کردن سبک CSS به کد HTML خود با شکستن این تفکیک، و به هر حال، از هر زمان که لازم باشد، باید اجتناب کرد.
عناصر مرکزی به صورت عمودی با CSS
اشیاء مرکزی عمودی همیشه در طراحی وب چالش برانگیز بوده است، اما با انتشار CSS3 ماژول چیدمان جعبه انعطاف پذیر CSS، اکنون راهی برای انجام این کار وجود دارد.
هم ترازی عمودی همانند تراز افقی که در بالا دیده می شود، عمل می کند. اموال CSS عمودی با مقدار متوسط است.
.vcenter {
عمودی خط: وسط؛
}
ناکامی این رویکرد این است که همه مرورگرها از CSS FlexBox پشتیبانی نمی کنند، اگر چه بیشتر و بیشتر به این روش طرح بندی CSS جدید می آیند! در واقع، تمام مرورگرهای مدرن اکنون از این سبک CSS پشتیبانی می کنند. این بدان معنی است که تنها نگرانی شما در رابطه با Flexbox نسخه قدیمی تر مرورگر خواهد بود.
اگر مشکلی با مرورگرهای قدیمی دارید، W3C توصیه می کند که متن را به طور عمودی در یک ظرف با استفاده از روش زیر متمرکز کنید:
- قرار دادن عناصر در یک عنصر حاوی محور، مانند div.
- حداقل ارتفاع را در عنصر حاوی تنظیم کنید.
- اعلام کنید که حاوی عنصر به عنوان یک سلول جدول است.
- تراز عمودی را به "وسط" تنظیم کنید.
به عنوان مثال، در اینجا CSS است:
.vcenter {
حداقل ارتفاع: 12 متر؛
نمایش: جدول سلول؛
عمودی خط: وسط؛
}
و اینجا HTML است:
این متن به صورت عمودی در کادر قرار دارد.
مرکزی عمودی و نسخه های قدیمی تر اینترنت اکسپلورر
بعضی از راه ها برای مجبور کردن اینترنت اکسپلورر (اینترنت اکسپلورر) به مرکز و سپس استفاده از نظرات شرطی است تا تنها IE بتواند سبک ها را ببیند، اما آنها کمی عمیق و زشت هستند. خبر خوب این است که با تصمیم اخیر مایکروسافت برای از بین بردن پشتیبانی از نسخه های قدیمی اینترنت اکسپلورر، این مرورگرهای بی نظیر باید به زودی از آنها دور شوند، و طراحان وب را برای استفاده از روش های مدرن طرح بندی مانند CSS FlexBox آسان تر می کند که تمامی طرح بندی CSS، نه تنها مرکز، برای همه طراحان وب بسیار ساده تر است.