بلوک سمت چپ

بلوک سمت راست

لینک به سایت ما

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

. حتی با ظهور HTML5 و ظهور رقبای جدی در قالب مقاله یا هدر، همچنان در همه جا در نشانه گذاری درج می شود. بنابراین، پیشنهاد می کنم به موضوع قالب بندی و تراز کردن بلوک های div در مرکز بپردازید.

DIV چیست؟

نام عنصر از کلمه انگلیسی division گرفته شده است که به معنای تقسیم است. هنگام نوشتن نشانه گذاری، برای شکستن عناصر به بلوک ها استفاده می شود. DIV ها گروه هایی از محتوا را در یک صفحه وب محصور می کنند. به عنوان مثال، تصاویر، پاراگراف ها با متن. این تگ به هیچ وجه بر نمایش محتوا تأثیر نمی گذارد و بار معنایی ندارد.

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

زمان استفاده از DIV

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

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

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

مرکز DIV را با حاشیه ها تراز کنید

هنگام رندر کردن عناصر وب، مرورگر سه ویژگی را در نظر می گیرد: padding، margining و border. padding فضای بین محتوا و حاشیه آن است. حاشیه - فیلدهایی که یک شی را از دیگری جدا می کند. مرز خطوطی در امتداد بلوک ها هستند. آنها را می توان یکباره از همه یا فقط از یک طرف اختصاص داد:

div( حاشیه: 1px جامد #333؛ حاشیه سمت چپ: هیچکدام؛ )

این ویژگی ها فضای خالی بین اشیاء را اضافه می کنند و همچنین به آنها کمک می کند تا آنها را به صورت دلخواه در یک راستا قرار دهند. به عنوان مثال، اگر یک بلوک با یک تصویر باید از لبه چپ به مرکز 20٪ افست شود، شما یک حاشیه-چپ به عنصر با مقدار 20٪ اختصاص می دهید:

Block-with-img (حاشیه-چپ: 20%؛ )

عناصر همچنین می توانند با استفاده از مقادیر عرض و لایه منفی آنها قالب بندی شوند. به عنوان مثال، یک بلوک با ابعاد 200 پیکسل در 200 پیکسل وجود دارد. ابتدا یک موقعیت مطلق به آن اختصاص دهید و 50٪ آن را به مرکز منتقل کنید.

Div( موقعیت: مطلق؛ چپ: 50%؛ )

اکنون، برای اطمینان از اینکه DIV کاملاً در مرکز قرار دارد، یک لایه منفی سمت چپ برابر با 50٪ عرض آن، یعنی -100 پیکسل به آن بدهید.

حاشیه سمت چپ: -100 پیکسل

در CSS به این "حذف هوا" می گویند. اما یک اشکال قابل توجه در نیاز به انجام محاسبات ثابت دارد که انجام آن برای عناصر با چندین سطح تودرتو بسیار دشوار است. اگر padding و border-width تنظیم شده باشد، مرورگر به طور پیش‌فرض ابعاد ظرف را به صورت مجموع عرض حاشیه‌ها، بالشتک سمت راست، سمت چپ و خود محتوای داخل محاسبه می‌کند که می‌تواند به صورت زیر باشد. یک شگفتی

بنابراین زمانی که نیاز دارید یک DIV را در مرکز قرار دهید، از ویژگی box-sizing با مقدار border-box استفاده کنید. از افزودن مقدار padding و حاشیه توسط مرورگر به عرض کلی عنصر DIV جلوگیری می کند. برای بالا یا پایین بردن یک عنصر، از مقادیر منفی نیز استفاده کنید. اما در این مورد، آنها را می توان به قسمت بالا یا پایین ظرف اختصاص داد.

نحوه وسط بلوک div با استفاده از حاشیه های خودکار

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

هنگام توسعه برنامه‌های واکنش‌گرا از روش حاشیه خودکار استفاده کنید. نکته کلیدی این است که به ظرف مقدار عرض بر حسب ems یا درصد بدهید. کد مثال بالا DIV را روی هر دستگاهی، از جمله، مرکز می‌کند تلفن های همراه، 90 درصد از صفحه را اشغال می کند.

تراز از طریق صفحه نمایش ویژگی: inline-block

به طور پیش‌فرض، عناصر DIV به عنوان عناصر بلوک در نظر گرفته می‌شوند و دارای مقدار نمایشی بلوک هستند. برای این روش، باید این ویژگی را لغو کنید. فقط برای DIV های دارای کانتینر اصلی مناسب است:

به یک عنصر با کلاس outer-div یک ویژگی text-align با مقدار مرکز اختصاص داده می شود که متن را در مرکز قرار می دهد. اما در حال حاضر، مرورگر DIV تودرتو را به عنوان یک شیء بلوک می بیند. برای اینکه ویژگی text-align کار کند، inner-div باید به صورت درون خطی در نظر گرفته شود. بنابراین، در جدول CSSبرای انتخابگر inner-div، کد زیر را بنویسید:

Inner-div (نمایشگر: inline-block;)

شما ویژگی نمایش را از بلوک به بلوک درون خطی تغییر می دهید.

روش تبدیل/ترجمه

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

transform: translate(50%, 50%);

تابع translate یک عنصر را از موقعیت فعلی به چپ/راست و بالا/پایین حرکت می‌دهد. دو مقدار در پرانتز ارسال می شود:

• درجه حرکت افقی؛
• درجه حرکت عمودی

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

تبدیل: translateY(-20%);

در برخی از راهنماها، می توانید تبدیل با پیشوندهای فروشنده را مشاهده کنید:

webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%). transform: translate(50%, 50%);

در سال 2018، دیگر نیازی به این کار نیست، این ویژگی توسط همه مرورگرها از جمله Edge و IE پشتیبانی می شود.

برای اینکه DIV مورد نیاز خود را در مرکز قرار دهیم، تابع translate CSS با مقدار 50% برای محورهای عمودی و افقی نوشته می شود. این باعث می شود که مرورگر عنصر را از موقعیت فعلی خود به نصف عرض و ارتفاع خود منتقل کند. ویژگی های عرض و ارتفاع باید مشخص شوند:

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

کار با طرح بندی Flexbox

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

در مثال‌های قبلی، قبلاً با ویژگی display کار کردیم، اما آن را روی مقادیر block (block) و inline (inline-block) قرار دادیم. برای ایجاد طرح‌بندی انعطاف‌پذیر، از display: flex استفاده می‌کنیم. ابتدا به یک ظرف انعطاف پذیر نیاز داریم:

برای تبدیل آن به یک ظرف انعطاف پذیر در جداول آبشاری، می نویسیم:

Flex-container (نمایشگر: flex; )

تمام اشیاء تو در تو، اما فقط بچه های مستقیم، آیتم های انعطاف پذیر خواهند بود:

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

قوانین برای قرار دادن اقلام فلکس

برای مدیریت اقلام انعطاف پذیر، به موارد justify-content و align-item نیاز دارید. بسته به مقادیری که مشخص می کنید، این دو ویژگی به طور خودکار اشیاء را در صورت نیاز قرار می دهند. اگر بخواهیم همه DIV های تودرتو را در مرکز قرار دهیم، justify-content: center، align-items: center و هیچ چیز دیگری را می نویسیم. مرورگر بقیه کارها را انجام خواهد داد:

برای قرار دادن متن روی DIV هایی که آیتم های انعطاف پذیر هستند، می توانید از ترفند استاندارد تراز کردن متن استفاده کنید. یا می‌توانید هر DIV تودرتو را به یک ظرف انعطاف‌پذیر تبدیل کنید و محتوا را با justify-content مدیریت کنید. این روش اگر حاوی محتوای متنوعی باشد، از جمله گرافیک، سایر اشیاء تودرتو، از جمله لیست های چند سطحی، بسیار منطقی تر است.

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

تراز کردن بلوک ها با اندازه های شناخته شده

ساده ترین راه برای استفاده از CSS تراز کردن جعبه هایی است که دارای ارتفاع از پیش تعیین شده (برای تراز عمودی) یا عرض (برای تراز افقی) هستند.

تراز با بالشتک

گاهی اوقات نمی توانید یک عنصر را در مرکز قرار دهید، اما با ویژگی " مرزهایی به آن اضافه کنید. لایه گذاری".

به عنوان مثال، یک تصویر 200 در 200 پیکسل وجود دارد و شما می خواهید آن را در یک بلوک 240 در 300 در مرکز قرار دهید. ما می توانیم ارتفاع و عرض را تنظیم کنیم. واحد بیرونی= 200 پیکسل، و 20 پیکسل برای بالا و پایین، و 50 برای چپ و راست اضافه کنید.

.example-wrapper1 ( پس زمینه : #535E73 ؛ عرض : 200 پیکسل ؛ ارتفاع : 200 پیکسل ؛ بالشتک : 20 پیکسل 50 پیکسل ؛ )

تراز کردن بلوک‌های کاملاً موقعیت‌یافته

اگر بلوک روی " تنظیم شود موقعیت: مطلق"، سپس می توان آن را نسبت به نزدیکترین والد با "position: relative" قرار داد. برای این، همه ویژگی ها (" بالا","درست","پایین","ترک کرد") از بلوک داخلی برای تخصیص همان مقدار، و همچنین "حاشیه: خودکار".

*یک نکته ظریف وجود دارد: عرض (ارتفاع) بلوک داخلی + مقدار سمت چپ (راست، پایین، بالا) نباید از اندازه بلوک والد تجاوز کند. ایمن تر است که ویژگی های چپ (راست، پایین، بالا) را روی 0 (صفر) تنظیم کنید.

.example-wrapper2 ( موقعیت: نسبی؛ ارتفاع: 250 پیکسل؛ پس‌زمینه: url(space.jpg)؛ ) 0؛ سمت راست: 0؛ حاشیه: خودکار؛ پس‌زمینه: url(king.png)؛ )

تراز افقی

تراز کردن با "Text-align: Center"

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

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

.example-text (Text-align: center; padding: 10px; background: #FF90B8; )

شایان ذکر است که این ویژگی نه تنها برای متن، بلکه برای هر عنصر درون خطی ("نمایش: درون خط") کار می کند.

اما این متن تراز چپ است، اما در بلوکی است که نسبت به wrapper در مرکز قرار دارد.

.example-wrapper3 (تراز متن: مرکز؛ پس‌زمینه: #FF90B8؛ .) متن درون خطی (نمایش: بلوک درون خطی؛ عرض: 40 درصد؛ لایه‌بندی: 10 پیکسل؛ تراز نوشتاری: چپ؛ پس‌زمینه: #FFE5E5؛ )

تراز کردن بلوک ها با حاشیه

عناصر سطح بلوک با عرض مشخص به راحتی با تنظیم آنها به صورت "Margin-left: auto; Margin-right: auto" به صورت افقی تراز می شوند. معمولاً از علامت اختصاری استفاده می شود: " حاشیه: 0 خودکار" (به جای صفر، هر مقداری می تواند وجود داشته باشد). اما برای تراز عمودی، این روش کار نخواهد کرد.

.lama-wrapper ( ارتفاع : 200 پیکسل ؛ پس زمینه : #F1BF88 ؛ ) .lama1 ( ارتفاع : 200 پیکسل ؛ عرض : 200 پیکسل ؛ پس زمینه : url (lama.jpg ؛ حاشیه : 0 خودکار ؛ )

به این ترتیب ارزش تراز کردن همه بلوک ها را دارد، در صورت امکان (در مواردی که موقعیت ثابت یا مطلق مورد نیاز نیست) - منطقی ترین و کافی ترین است. در حالی که این امر بدیهی به نظر می رسد، من گهگاه نمونه های ترسناک با تورفتگی های منفی را دیده ام، بنابراین فکر کردم که توضیح بدهم.

چیدمان عمودی

مشکلات بسیار بیشتری در تراز عمودی وجود دارد - ظاهراً این در CSS پیش بینی نشده بود. راه های مختلفی برای رسیدن به نتیجه دلخواه وجود دارد، اما همه آنها خیلی زیبا نیستند.

تراز با ویژگی line-height

در مواردی که فقط یک خط در بلوک وجود دارد، می توانید با اعمال "" به تراز عمودی آن برسید. ارتفاع خط" و آن را روی ارتفاع دلخواه قرار دهید. برای ایمن بودن باید "height" را نیز تنظیم کنید که مقدار آن برابر با مقدار "line-height" خواهد بود، زیرا دومی در همه مرورگرها پشتیبانی نمی شود.

.example-wrapper4 (ارتفاع خط: 100 پیکسل؛ رنگ: #DC09C0؛ پس‌زمینه: #E5DAE1؛ ارتفاع: 100 پیکسل؛ تراز نوشتاری: مرکز؛ )

همچنین امکان تراز کردن یک بلوک با چندین خط وجود دارد. برای انجام این کار، باید از یک بلوک بسته بندی اضافی استفاده کنید و ارتفاع خط را روی آن تنظیم کنید. بلوک داخلی می تواند چند خطی باشد، اما باید "داخلی" باشد. شما باید "Tertical-align: Middle" را روی آن اعمال کنید.

.example-wrapper5 (ارتفاع خط: 160 پیکسل؛ ارتفاع: 160 پیکسل؛ اندازه قلم: 0؛ پس‌زمینه: #FF9B00؛ ) 1.5؛ تراز عمودی: وسط؛ پس‌زمینه: #FFFAF2؛ رنگ: #FF9B00; ;)

بلوک wrapper باید دارای "اندازه فونت: 0" باشد. اگر اندازه فونت را روی صفر تنظیم نکنید، مرورگر چند پیکسل اضافی از خود اضافه می کند. همچنین باید اندازه فونت و ارتفاع خط را برای بلوک داخلی مشخص کنید، زیرا این ویژگی ها از والد به ارث برده می شوند.

تراز عمودی در جداول

ویژگی " تراز عمودی" سلول های جدول را نیز تحت تاثیر قرار می دهد. با تنظیم مقدار "middle"، محتوای داخل سلول در مرکز قرار می گیرد. البته طرح بندی جدولی امروزه قدیمی تلقی می شود، اما در موارد استثنایی می توان با تعیین "" شبیه سازی کرد. نمایش: سلول جدول".

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

.one_product .img_wrapper (نمایش: سلول جدول؛ ارتفاع: 169 پیکسل؛ تراز عمودی: وسط؛ سرریز: پنهان؛ پس‌زمینه: #fff؛ عرض: 255 پیکسل؛ ) .one_product img (حداکثر ارتفاع: 169-10 پیکسل؛ حداکثر %؛ عرض حداقل: 140 پیکسل؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛)

لازم به یادآوری است که اگر عنصر دارای مجموعه "شناور" غیر از "هیچ" باشد، به هر حال به شکل بلوک (نمایش: بلوک) خواهد بود - پس باید از یک بسته بندی بلوک اضافی استفاده کنید.

تراز کردن با یک عنصر درون خطی اضافی

و برای عناصر درون خطی، می توانید اعمال کنید " عمودی- تراز: وسط". در این مورد، تمام عناصر با " نمایشگر: درون خطی" که در یک خط قرار دارند با یک خط مرکزی مشترک تراز خواهند شد.

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

نمونه fff ؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .riki (نمایش: بلوک درون خطی؛ ارتفاع: 100 درصد؛ تراز عمودی: وسط؛ )

صفحه نمایش: انعطاف پذیری و تراز

اگر به کاربران اکسپلورر 8 اهمیت زیادی نمی‌دهید، یا آنقدر اهمیت می‌دهید که می‌خواهید یک جاوا اسکریپت اضافی برای آن‌ها قرار دهید، می‌توانید از «display: flex» استفاده کنید. جعبه‌های فلکس به خوبی مسائل مربوط به تراز را حل می‌کنند و کافی است که «حاشیه: خودکار» را بنویسید تا محتوا را در مرکز قرار دهید.

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

.example-wrapper7 (نمایشگر: انعطاف پذیر؛ ارتفاع: 300 پیکسل؛ پس زمینه: #AEB96A؛ ) .example-wrapper7 img (حاشیه: خودکار؛ )

خوب، این تمام چیزی است که می خواستم در مورد آن بنویسم تراز CSS. اکنون تمرکز محتوا مشکلی نخواهد داشت!