سلام! بیایید به تسلط بر اصول اولیه ادامه دهیم زبان HTML. بیایید ببینیم برای تراز کردن متن با مرکز، عرض یا لبه ها چه چیزی باید بنویسید.

برای شروع به کار، بیایید به نحوه وسط متن در سه قسمت نگاه کنیم به روش های مختلف. دو مورد آخر مستقیماً به شیوه نامه مرتبط هستند. این می تواند یک فایل CSS باشد که به صفحات سایت متصل می شود و ظاهر آنها را مشخص می کند.

روش 1 - کار مستقیم با HTML

در واقع بسیار ساده است. مثال زیر را ببینید.

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

اگر می خواهید قطعات متن را به روش دیگری جابجا کنید، به جای پارامتر "center"، مقادیر زیر را وارد کنید:

• توجیه - تراز کردن متن با عرض صفحه.
• سمت راست - در لبه سمت راست؛
• چپ - به سمت چپ.

بر اساس قیاس، می توانید محتوایی را که در سربرگ (h1، h2) و ظرف (div) قرار دارد، جابجا کنید.

روش 2 و 3 - استفاده از سبک ها

طرح ارائه شده در بالا می تواند کمی تغییر کند. اثر همان خواهد بود. برای این کار باید کد زیر را بنویسید.

بلوک متن.

در این فرم، کد مستقیماً در HTML نوشته می شود تا محتوای متن را در مرکز قرار دهد.

راه جایگزین دیگری برای دستیابی به نتایج وجود دارد. شما باید چند مرحله را انجام دهید.

مرحله 1. در کد اصلی بنویسید

مواد متن.

مرحله 2. در فایل CSS موجود، کد زیر را وارد کنید:

رونو (Text-align:center;)

توجه دارم که کلمه "rovno" فقط نام کلاسی است که می توان آن را متفاوت نامید. این به صلاحدید برنامه نویس واگذار شده است.

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

فقط چند سوال:

• آیا در حال انجام یک پروژه غیرانتفاعی اطلاعاتی هستید؟
• آیا می خواهید سایت شما به خوبی کار کند؟ موتورهای جستجو?
• آیا می خواهید از طریق اینترنت درآمد کسب کنید؟

اگر همه پاسخ ها مثبت هستند، کافی است به یک رویکرد یکپارچه برای توسعه وب سایت نگاه کنید. اطلاعات به خصوص مفید خواهد بود اگر او برای کار کند CMS وردپرس.

می‌خواهم به این نکته اشاره کنم که وب‌سایت‌های شما تنها یکی از گزینه‌های متعدد برای ایجاد درآمد غیرفعال یا فعال در اینترنت هستند. وبلاگ من به فرصت های مالی آنلاین اختصاص دارد.

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

در آینده چند مورد دیگر را منتشر خواهم کرد اطلاعات مفید. متصل بمانید در صورت تمایل، می‌توانید از طریق ایمیل در به‌روزرسانی‌های Workip مشترک شوید. فرم اشتراک در زیر قرار دارد.

تراز کردن عناصر به صورت افقی و عمودی قابل انجام است به طرق مختلف. انتخاب روش بستگی به نوع عنصر (بلوک یا درون خطی)، نوع موقعیت آن، اندازه و غیره دارد.

1. تراز افقی به مرکز بلوک/صفحه 1.1. اگر بلوک دارای عرض باشد: div (عرض: 300 پیکسل؛ حاشیه: 0 خودکار؛ /*مرکز عنصر به صورت افقی در بلوک والد*/ )

اگر می‌خواهید یک عنصر درون خطی را به این ترتیب تراز کنید، باید آن را طوری تنظیم کنید که نمایش داده شود: block;

1.2. اگر یک بلوک در داخل بلوک دیگری تو در تو باشد و فاقد عرض/مشخص باشد: .wrapper (Text-align: center;) 1.3. اگر عرض بلوک تنظیم شده باشد و باید آن را در مرکز بلوک اصلی ثابت کنید: .wrapper (وضعیت: نسبی؛ /* موقعیت نسبی را برای بلوک والد تنظیم کنید تا بتوانیم بلوک را کاملاً داخل آن قرار دهیم * /) .box (عرض: 400 پیکسل؛ موقعیت: مطلق؛ سمت چپ: 50 درصد؛ حاشیه-چپ: -200 پیکسل؛ /*بلوک را با فاصله ای برابر با نصف عرض آن به سمت چپ تغییر دهید*/) 1.4. اگر بلوک‌ها پهنای مشخصی ندارند، می‌توانید با استفاده از یک بلوک بسته‌بندی اصلی آن‌ها را در مرکز قرار دهید: .wrapper (تراز کردن متن: مرکز؛ /*محتوای بلوک را در مرکز قرار دهید*/) .box (نمایش: بلوک درون خطی؛ / *بلوک ها را در یک ردیف به صورت افقی بچینید*/ margin-right: -0.25em/*حذف حاشیه سمت راست بین بلوک ها*/ ) 2. تراز عمودی اگر متن یک خط را اشغال می کند، برای مثال، برای دکمه ها و آیتم های منو: .button ( ارتفاع: 50 پیکسل؛ ارتفاع خط: 50 پیکسل؛ ) 2.2. برای تراز کردن یک بلوک به صورت عمودی در داخل بلوک والد: .wrapper (موقعیت: نسبی؛) .box (ارتفاع: 100px؛ موقعیت: مطلق؛ بالا: 50%؛ حاشیه: -50px 0 0 0؛ ) 2.3. تراز عمودی بر اساس نوع جدول: .wrapper (نمایش: جدول؛ عرض: 100٪؛) .box (نمایش: سلول جدول؛ ارتفاع: 100 پیکسل؛ تراز متن: مرکز؛ تراز عمودی: وسط؛ ) 2.4. اگر به جعبه ای عرض و ارتفاع داده می شود و باید بر روی جعبه اصلی آن متمرکز شود: .wrapper ( موقعیت: نسبی؛ ) .box ( ارتفاع: 100 پیکسل؛ عرض: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0. پایین: 0: حاشیه: خودکار: /*به طوری که محتوا پخش نشود. موقعیت یابی مطلق در مرکز صفحه/بلوک با استفاده از تبدیل CSS3:

اگر ابعاد برای عنصر مشخص شده باشد

div ( عرض: 300 پیکسل؛ /*عرض بلوک را تنظیم کنید*/ ارتفاع: 100 پیکسل؛ /*ارتفاع بلوک را تنظیم کنید*/ تبدیل: translate(-50%, -50%)؛ موقعیت: مطلق؛ بالا: 50 % ؛ سمت چپ : 50 % ;

اگر عنصر فاقد ابعاد باشد و خالی نباشد

برخی از متن‌ها در اینجا h1 (حاشیه: 0؛ تبدیل: ترجمه (-50%، -50%)؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ )

2.5. موقعیت یابی بلوک مطلق

در مرکز صفحه

div ( عرض: 500 پیکسل؛ ارتفاع: 100 پیکسل؛ /* اگر ارتفاع صریحاً تنظیم نشده باشد، 100% خواهد بود */ موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ چپ: 0؛ راست: 0؛ حاشیه: خودکار ;)

در مرکز بلوک

.wrapper ( موقعیت: مطلق؛ ) .box (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ /* اگر ارتفاع به صراحت تنظیم نشده باشد، 100٪ خواهد بود */ موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ سمت چپ: 0 ; سمت راست: 0;

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

ظرافت های اساسی

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

چگونه میز را در مرکز قرار دهیم

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

...

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

هم ترازی مرکز در سلول ها

به همان اندازه، باید داده ها را با مرکز سلول تراز کنید. سه راه برای این کار وجود دارد: افقی، عمودی و مطلق. از نام آنها مشخص است که مرکز در امتداد کدام محور انجام خواهد شد. در هر صورت از تگ استفاده می شود ، مسئول یک سلول خاص در یک ردیف است. در مرحله بعد، باید بسته به وظیفه خود، ویژگی های valign (عمودی) و/یا تراز (افقی) آن را مقدار "مرکز" اختصاص دهید:

متن در مرکز سلول

اگر می خواهید این قالب بندی را برای کل سایت یا صفحه استاندارد کنید (به طوری که هر جدول را بازنویسی نکنید)، باید از سبک های CSS استفاده کنید. برای این کار کد زیر را داخل تگ اضافه کنید:

جدول (Text-align: center; // برای تراز کردن محتویات جدول در مرکز افقی عمودی-align: Middle; // برای تراز کردن محتویات جدول در مرکز عمودی)

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

اگر هر وب سایتی را که بر اساس html ایجاد شده است برش دهید، ساختار لایه لایه خاصی را خواهید دید. علاوه بر این، با خودش ظاهرمشابه خواهد بود کیک لایه ای. اگر اینطور فکر می کنید، به احتمال زیاد برای مدت طولانی غذا نخورده اید. بنابراین ابتدا گرسنگی خود را برطرف کنید و سپس به شما خواهیم گفت که چگونه یک لایه div را در سایت خود متمرکز کنید:

مزایای طرح بندی با استفاده از برچسب

دو نوع ساختار اصلی وب سایت وجود دارد:

• جدولی;
• مسدود کردن.

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

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

ساخت بلوک سایت علاوه بر سرعت بارگذاری بالا به شما این امکان را می دهد که حجم را چندین بار کاهش دهید کد html. از جمله از طریق استفاده از کلاس های CSS.

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

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

کمک های موقعیت یابی

در چیدمان بلوک، بهتر است لایه ها را با استفاده از شیوه نامه های آبشاری قرار دهید. ویژگی اصلی CSS که مسئول layout است float است.
نحو ویژگی:
شناور: چپ | راست | هیچکدام | ارث بردن
کجا:

• سمت چپ – عنصر را در لبه چپ صفحه تراز کنید. جریان اطراف عناصر باقی مانده در سمت راست رخ می دهد.
• راست - تراز در سمت راست، جریان در اطراف عناصر دیگر - در سمت چپ.
• هیچکدام - بسته بندی مجاز نیست.
• inherit - مقدار عنصر والد را به ارث می برد.

بیایید به یک مثال سبک وزن از موقعیت یابی div ها با استفاده از این ویژگی نگاه کنیم:

#چپ ( عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255،51،102؛ ) #راست (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: راست؛ پس‌زمینه: rgb(0،255،153)؛ ) بلوک چپ بلوک سمت راست

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

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

لایه های مرکزی

در مثال بعدی از یک لایه کانتینری استفاده می کنیم که عناصر باقی مانده را در آن قرار می دهیم. با تغییر اندازه پنجره، مشکل حرکت بلوک ها نسبت به یکدیگر حل می شود. وسط قرار دادن ظرف در وسط با صفر کردن ویژگی های حاشیه برای حاشیه ها از لبه بالا و خودکار در طرفین انجام می شود (حاشیه: 0 خودکار):

#container ( عرض: 600 پیکسل؛ حاشیه: 0 خودکار؛ ) #چپ (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255،51،102؛ ) #راست (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور چپ;

همین مثال نشان می دهد که چگونه می توانید یک div را به صورت افقی در مرکز قرار دهید. و اگر کد بالا را کمی ویرایش کنید، می توانید به آن برسید تراز عمودیبلوک ها برای این کار فقط باید طول لایه ظرف را تغییر دهید (کاهش دهید). یعنی بعد از ویرایش کلاس css آن باید به شکل زیر باشد:

پس از تغییر، تمام بلوک ها به طور دقیق در یک ردیف در وسط قرار می گیرند. و موقعیت آنها بدون توجه به اندازه پنجره مرورگر تغییر نخواهد کرد. در اینجا قرار گرفتن در مرکز یک div به صورت عمودی به نظر می رسد:

در مثال زیر، از تعدادی ویژگی جدید css برای قرار دادن لایه‌ها در یک ظرف استفاده کردیم:

#کانتینر (عرض: 450 پیکسل؛ ارتفاع: 150 پیکسل؛ حاشیه: 0 خودکار؛ رنگ پس‌زمینه: # 66CCFF؛ ) #چپ (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb (255،51،102)، نمایشگر: بلوک درون خطی. عمودی-تراز: وسط؛ حاشیه-چپ: 35 پیکسل; #مرکز (عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb(255،0،0؛ صفحه نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ حاشیه-چپ: 35 پیکسل؛ )

توضیح کوتاهی از خصوصیات css و مقادیر آنها که در این مثال برای قرار دادن یک div در یک div استفاده کردیم:

• نمایش: بلوک درون خطی - یک عنصر بلوک را در یک خط تراز می کند و اطمینان می دهد که در اطراف عنصر دیگری قرار می گیرد.
• vertical-align: middle – المان را در وسط نسبت به والد تراز می کند.
• margin-left - حاشیه سمت چپ را تنظیم می کند.

چگونه از یک لایه پیوند ایجاد کنیم

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

#layer1 (عرض: 500 پیکسل؛ ارتفاع: 100 پیکسل؛ پس‌زمینه: rgb (51،255،204)، حاشیه: شیار؛ ) a (نمایش: بلوک؛ تراز متن: مرکز؛ ارتفاع: 100٪؛ رنگ: rgb (255،0،51) ) پیوند به وب سایت ما

در این مثال، با استفاده از نمایش خط: block، پیوند را به مقدار یک عنصر بلوک تنظیم می کنیم. و به طوری که کل ارتفاع بلوک div به یک پیوند تبدیل شود، ارتفاع را 100٪ تنظیم کنید.

پنهان کردن و نمایش عناصر بلوک

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

این به ویژه برای صفحه اصلی که هزینه تبلیغات در آن بالاترین است، صادق است. بنابراین، مشکل این است که کجا دیگری را "هل" کنیم بنر تبلیغاتی. و در اینجا شما نمی توانید با تراز کردن div در مرکز صفحه کنار بیایید!

یک راه حل منطقی تر این است که برخی از بلوک ها را پنهان کنید. در اینجا یک مثال ساده از چنین پیاده سازی است:

#layer1( display:block; عرض: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) other ( layer1="none"; ) document.getElementById("layer1").style.display=layer1)

این دکمه جادویی است. با کلیک بر روی آن، بلوک مخفی پنهان یا نمایش داده می شود.

در این مثال مکان بلوک های div به هیچ وجه تغییر نمی کند. در اینجا استفاده می شود ساده ترین عملکردجاوا اسکریپت تغییر ارزش ویژگی های cssپس از کلیک روی دکمه (رویداد onclick) نمایش داده شود.

شروع کنید