پیشنهاد در سمت راست

جمله با استفاده از پایان

سی AT E تیOبه

برای ایجاد یک خط قرمز، فقط باید یک پارامتر را بدانید.

این یک ویژگی ساده با تورفتگی متن است.

. حتی با ظهور 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 استفاده می شود. نوع تبدیل و درجه مورد نظر به عنوان مقادیر مشخص می شود. AT این مثالما با ترجمه کار خواهیم کرد:

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 مدیریت کنید. این روش اگر حاوی محتوای متنوعی باشد، از جمله گرافیک، سایر اشیاء تودرتو، از جمله لیست های چند سطحی، بسیار منطقی تر است.

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

1. تراز افقی به مرکز بلوک / صفحه

1.1. اگر بلوک دارای عرض باشد:

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

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

1.2. اگر بلوکی درون بلوک دیگری تودرتو باشد و هیچ/عرض برای آن تنظیم نشده باشد:

.wrapper(text-align:center;)

1.3. اگر بلوک دارای عرض است و باید در مرکز بلوک مادر ثابت شود:

.wrapper (وضعیت: نسبی؛ /* کادر والد را روی موقعیت نسبی قرار دهید تا بتوانیم بعداً کادر را کاملاً داخل آن قرار دهیم*/) .box (عرض: 400 پیکسل؛ موقعیت: مطلق؛ چپ: 50 درصد؛ حاشیه-چپ: - 200 پیکسل؛ / *بلوک را با فاصله ای معادل نصف عرض آن به سمت چپ تغییر دهید*/ )

1.4. اگر هیچ عرضی برای بلوک‌ها تنظیم نشده است، می‌توانید با استفاده از بلوک بسته‌بندی والد در مرکز قرار دهید:

.wrapper (تراز کردن متن: مرکز؛ /*محتوای بلوک را در مرکز قرار دهید*/) تورفتگی بین بلوک ها*/ )

2. تراز عمودی

2.1. اگر متن یک خط را اشغال کند، به عنوان مثال، برای دکمه ها و آیتم های منو:

دکمه (ارتفاع: 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؛ چپ: 0؛ حاشیه: خودکار؛ سرریز: خودکار؛ /*به محتوا پخش نشد */ )

2.5. موقعیت یابی مطلق در مرکز صفحه/بلوک با استفاده از تبدیل CSS3:

اگر عنصر دارای ابعاد باشد

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

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

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

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

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

مثال 4.1. مرکز کردن با تگ CENTER

این متن در مرکز پنجره مرورگر و زیر آن تراز می شود
نقاشی در سمت راست

به طور رسمی، CENTER فقط باید به عنوان یک پارامتر برای سایر تگ های بلوک (P، PRE، و دیگران) استفاده شود. با این حال، در مرورگر Netscape Navigator 2.0، CENTER به عنوان یک برچسب مستقل معرفی شد. این افزودنی برای حذف بالشتک عمودی اضافی که هنگام استفاده از تگ های بلوک ظاهر می شود، در نظر گرفته شده است. اگر به جای تگ CENTER متن داخل یک پاراگراف قرار گیرد (

) ، یک تورفتگی عمودی اضافی بین وجود دارد خط افقیو این متن

CENTER بخشی از مشخصات HTML نیست. در "رسمی" قالب بندی HTML، مانند تراز متن باید از طریق ویژگی های برچسب انجام شود (به عنوان مثال،

) یا استفاده از استایل ها. با این وجود، این برچسب حق وجود را به دست آورد. با این حال، از زمان انتشار مشخصات HTML 4 W3، کنسرسیوم توصیه کرده است که از استفاده از تگ CENTER اجتناب شود و عنصر

همانطور که در مثال 4.2 نشان داده شده است.

مثال 4.2. مرکز کردن با یک تگ DIV

---

یکی دیگر از راه های مرکز، استفاده از استایل ها است. سبک‌ها دستورالعمل‌هایی هستند که به شما امکان می‌دهند ویژگی‌های قالب‌بندی مانند فونت، رنگ، تراز و غیره را کنترل کنید. نمونه‌ای از تعریف مجدد تگ P در مرکز متن.

مثال 4.3. مرکز کردن با سبک ها

حالا وقتی از تگ P با موارد بالا استفاده می کنید
سبک، متن پاراگراف در مرکز پنجره مرورگر تراز می شود

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

بیا شروع کنیم با توضیحات کلیوظایف

مشکل مرکز عمودی

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

اکثر افراد هنگام استفاده از ویژگی text-align: به خاصیت vertical-align برای وسط عمودی مراجعه می کنند. همه چیز کاملا منطقی به نظر می رسد. اگر از قالب‌های جدول استفاده کرده‌اید، احتمالاً از ویژگی valign به طور گسترده استفاده کرده‌اید، که این باور را تقویت می‌کند که عمودی تراز کردن راه درستی است.

اما ویژگی valign فقط روی سلول های جدول کار می کند. و ویژگی vertical-align بسیار شبیه است. همچنین بر سلول های جدول و برخی از عناصر درون خطی تأثیر می گذارد.

مقدار ویژگی vertical-align نسبت به عنصر درون خطی والد است.

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

اما متأسفانه، ویژگی vertical-align روی عناصر سطح بلوک (مانند پاراگراف های داخل یک عنصر div) کار نمی کند. این وضعیت ممکن است به این ایده منجر شود که هیچ راه حلی برای مشکل تراز عمودی وجود ندارد.

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

روش ارتفاع خط

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

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

HTML:

CSS:

#child (قد خط: 200 پیکسل؛ )

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

وسط یک تصویر با ارتفاع خط

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

HTML:

CSS:

#parent (ارتفاع خط: 200 پیکسل؛ ) #img والد ( تراز عمودی: وسط؛ )

مقدار ویژگی line-height باید بیشتر از ارتفاع تصویر باشد.

روش جدول CSS

همانطور که در بالا ذکر شد، ویژگی vertical-align برای سلول های جدول اعمال می شود، جایی که عالی عمل می کند. می‌توانیم عنصر خود را به‌عنوان یک سلول جدول رندر کنیم و از ویژگی vertical-align روی آن برای مرکزیت عمودی محتوا استفاده کنیم.

توجه داشته باشید: جدول CSSمانند جدول HTML نیست.

HTML:

CSS:

#والد (نمایش: جدول؛) #فرزند (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

خروجی جدول را روی div والد تنظیم می کنیم و div تودرتو را به عنوان سلول جدول رندر می کنیم. اکنون می توانید از ویژگی vertical-align در ظرف داخلی استفاده کنید. همه چیز در آن به صورت عمودی در مرکز قرار می گیرد.

بر خلاف روش بالا، در این مورد محتوا می تواند پویا باشد، زیرا عنصر div به اندازه محتوای خود تغییر می کند.

عیب این روش این است که در نسخه های قدیمی IE کار نمی کند. باید از ویژگی display: inline-block برای ظرف تودرتو استفاده کنید.

موقعیت یابی مطلق و حاشیه های منفی

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

کد مثال هم مرکز افقی و هم عمودی را همزمان انجام می دهد:

HTML:

CSS:

#والدین (موقعیت: نسبی؛) #فرزند (موقعیت: مطلق؛ بالا: 50٪؛ سمت چپ: 50٪؛ قد: 30٪؛ عرض: 50٪؛ حاشیه: -15٪ 0 0 -25٪؛ )

ابتدا نوع موقعیت یابی عناصر را تنظیم می کنیم. سپس، روی div تودرتو، ویژگی های بالا و چپ را روی 50% تنظیم کنید که مرکز عنصر والد است. اما مرکز به سمت چپ برخورد می کند گوشه بالاعنصر تو در تو بنابراین، باید آن را بلند کنید (نصف ارتفاع) و به سمت چپ (نصف عرض) حرکت دهید و سپس مرکز با مرکز عنصر والد منطبق شود. بنابراین دانستن ارتفاع عنصر در این مورد ضروری است. سپس به عنصر منفی حاشیه بالا و چپ به ترتیب برابر با نصف ارتفاع و عرض می دهیم.

این روش در همه مرورگرها کار نمی کند.

موقعیت و کشش مطلق

کد مثال، مرکزیت عمودی و افقی را انجام می دهد.

HTML:

CSS:

#والد (موقعیت: نسبی؛) #فرزند ( موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ چپ: 0؛ سمت راست: 0؛ عرض: 50%؛ قد: 30%؛ حاشیه: خودکار؛ )

ایده پشت این روش این است که با تنظیم ویژگی های بالا، پایین، راست و چپ روی 0، عنصر تودرتو به هر 4 مرز عنصر والد کشیده شود.

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

متأسفانه این روش در IE7 به بالا کار نمی کند.

بالشتک بالا و پایین برابر است

این روش صریحاً لایه های مساوی را در بالا و پایین عنصر والد تنظیم می کند.

HTML:

CSS:

#والد ( بالشتک: 5% 0؛ ) #فرزند ( بالشتک: 10% 0؛ )

در کد مثال CSSحاشیه های بالا و پایین برای هر دو عنصر تنظیم شده است. برای یک عنصر تو در تو، تنظیم بالشتک در مرکز عمودی آن عمل می کند. و بالشتک عنصر والد، عنصر تودرتو را در آن مرکز خواهد کرد.

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

به عنوان مثال، اگر عنصر والد 400 پیکسل ارتفاع و عنصر تو در تو 100 پیکسل باشد، 150 پیکسل در بالا و پایین مورد نیاز است.

150 + 150 + 100 = 400

استفاده از % باعث می شود که محاسبات به مرورگر سپرده شود.

این روش در همه جا کار می کند. نکته منفی نیاز به محاسبات است.

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

شناور div

این روش از یک عنصر div خالی استفاده می کند که شناور می شود و به کنترل موقعیت عنصر تو در تو در سند کمک می کند. توجه داشته باشید که div شناور قبل از عنصر تودرتو در کد HTML قرار می گیرد.

HTML:

CSS:

#والد (قد: 250 پیکسل؛) # شناور ( شناور: سمت چپ؛ ارتفاع: 50 درصد؛ عرض: 100 درصد؛ حاشیه پایین: -50 پیکسل؛ ) #فرزند ( واضح: هر دو؛ قد: 100 پیکسل؛ )

div خالی را به سمت چپ یا راست افست می کنیم و به آن ارتفاع 50 درصد عنصر والد می دهیم. به این ترتیب نیمه بالایی عنصر والد را پر می کند.

از آنجایی که این div شناور است، از جریان عادی سند حذف می شود و باید عنصر تودرتو را باز کنیم. در مثال از clear: هر دو استفاده می شود، اما کافی است از همان جهت به عنوان افست عنصر div خالی شناور استفاده شود.

حاشیه بالایی عنصر div تو در تو درست زیر مرز پایینی عنصر div خالی است. باید عنصر تودرتو را به اندازه نصف ارتفاع عنصر خالی شناور به سمت بالا حرکت دهیم. برای حل مشکل، از مقدار منفی ویژگی margin-bottom برای یک عنصر div خالی شناور استفاده می‌شود.

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

نتیجه

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