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

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

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

< div id = "wrapper" > < div id = "header" > < / div > < / div >

بیایید فرض کنیم که این هدر سایت است. تمام عرض پنجره را نمی‌پوشاند و باید آن را در مرکز قرار دهیم. اینطور می نویسیم:

#سرتیتر( عرض / حداکثر عرض : 800 پیکسل . حاشیه : 0 خودکار ;

باید عرض دقیق یا حداکثر را مشخص کنیم و سپس ویژگی key - margin: 0 auto را بنویسیم. حاشیه ها را برای هدر ما تعیین می کند، مقدار اول حاشیه ها را از بالا و پایین تعیین می کند، و دومی - به راست و چپ. مقدار خودکار به مرورگر دستور می دهد تا به طور خودکار padding را در هر دو طرف محاسبه کند تا عنصر دقیقاً در مرکز عنصر والد باشد. به راحتی!

تراز متن

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

متن را به صورت عمودی تراز کنید

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

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

div( پس‌زمینه: #cccc؛ padding: 30px 0; )

div ( پس زمینه : #ccc; padding : 30px 0 ;

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

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

div( ارتفاع: 60 پیکسل؛ ارتفاع خط: 60 پیکسل؛ )

div ( ارتفاع: 60 پیکسل ارتفاع خط: 60 پیکسل؛

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

تبدیل بلوک به سلول جدول ماهیت این روش این است که ویژگی vertical-align: middle بر روی سلول جدول عمل می کند که عنصر را به صورت عمودی در مرکز قرار می دهد. بر این اساس، در این مورد، بلوک باید به صورت زیر تنظیم شود:

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

div ( نمایش : جدول - سلول ; عمودی - تراز : وسط ;

این روش خوب است زیرا می توانید هر تعداد متن را که دوست دارید در مرکز تراز کنید. اما بهتر است display: table را روی بلوکی که div ما در آن قرار دارد تنظیم کنیم، در غیر این صورت ممکن است کار نکند.

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

افست ها را به صورت درصد تنظیم کنید. اگر ارتفاع عنصر والد را می‌دانید و عنصر دیگری در سطح بلوک را درون آن قرار می‌دهید، می‌توانید با استفاده از درصد padding آن را در مرکز قرار دهید. به عنوان مثال، ارتفاع والد 600 پیکسل است. شما یک بلوک در آن قرار می دهید که ارتفاع آن 300 پیکسل است. چقدر باید از بالا و پایین پشتیبان بگیرید تا آن را در مرکز قرار دهید؟ هر کدام 150 پیکسل که 25 درصد قد والدین است.

این روش به شما امکان می دهد فقط زمانی که ابعاد به شما امکان محاسبات را می دهد مرکز را انجام دهید. و اگر قد والدتان 887 پیکسل باشد، نمی‌توانید دقیقاً چیزی بنویسید، این از قبل واضح است.

یک عنصر را در سلول جدول قرار دهید. مجدداً، اگر عنصر والد را به سلول جدول تبدیل کنیم، بلوک درج شده در آن به طور خودکار به صورت عمودی در مرکز قرار می گیرد. برای انجام این کار، والدین فقط باید vertical-align: middle را تنظیم کنند.

و اگر علاوه بر این، margin: 0 auto را نیز بنویسیم، عنصر به صورت افقی در مرکز قرار می گیرد!

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

بیایید با توضیح کلی مشکل شروع کنیم.

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

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

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

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

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

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

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

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

روش ارتفاع خط

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

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

HTML:

CSS:

#child (قد خط: 200px؛ )

این روش در همه مرورگرها کار می کند، اگرچه فقط برای یک خط می توان از آن استفاده کرد. مقدار 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 برای مثال، padding بالا و پایین برای هر دو عنصر تنظیم شده است. برای یک عنصر تو در تو، تنظیم بالشتک در مرکز عمودی آن عمل می کند. و بالشتک عنصر والد عنصر تودرتو را در آن مرکز می کند.

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

به عنوان مثال، اگر عنصر والد 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 خالی اضافی و آگاهی از ارتفاع عنصر تودرتو نیاز دارد.

نتیجه

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

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

در زیر راه های اصلی برای حل مشکل، مزایا و معایب آنها آورده شده است. برای درک ماهیت مثال ها، توصیه می کنم ارتفاع / عرض پنجره Result را در مثال های پیوندهای نشان داده شده کاهش دهید.

گزینه 1. بالشتک منفی.

تثبیت موقعیت مسدود کردنویژگی های بالا و سمت چپ 50٪ و با دانستن ارتفاع و عرض بلوک از قبل، یک حاشیه منفی را تعیین کنید که برابر با نصف اندازه است. مسدود کردن. یک عیب بزرگ این گزینه این است که باید تورفتگی های منفی را بشمارید. همون روش مسدود کردندر محیط نوارهای پیمایش کاملاً درست رفتار نمی کند - به دلیل داشتن تورفتگی های منفی به سادگی قطع می شود.

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ ) .block (عرض: 250 پیکسل؛ ارتفاع: 250 پیکسل؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ : 50%؛ حاشیه: -125px 0 0 -125px؛ img (حداکثر عرض: 100%؛ ارتفاع: خودکار؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛ حاشیه: هیچکدام؛ ))

گزینه 2: تورفتگی خودکار.

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

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ ) .block (عرض: 250 پیکسل؛ ارتفاع: 250 پیکسل؛ موقعیت: مطلق؛ بالا: 0؛ سمت راست: 0؛ پایین: 0؛ سمت چپ: 0؛ حاشیه: خودکار؛ img (حداکثر عرض: 100%؛ ارتفاع: خودکار؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛ حاشیه: هیچکدام؛ ))

گزینه 3. جدول.

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

والد (عرض: 100%؛ ارتفاع: 100%؛ نمایش: جدول؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ > .inner (نمایش: سلول جدول؛ تراز متن: مرکز؛ تراز عمودی: وسط. ) ) .block (نمایش: بلوک درون خطی؛ img (نمایش: بلوک؛ حاشیه: هیچکدام؛ ))

برای افزودن یک اسکرول به این مثال، باید یک عنصر دیگر به ساختار اضافه کنید.
مثال: jsfiddle.net/serdidg/fk5nqh52/3.

گزینه 4. شبه عنصر.

این گزینه فاقد تمام مشکلات ذکر شده در روش های قبلی است و همچنین وظایف اصلی را حل می کند. نکته این است که داشته باشید والدینتنظیم سبک ها عنصر شبهقبل، یعنی 100٪ ارتفاع، تراز وسط و مدل جعبه درونی. مشابه با مسدود کردنمدل بلوک درون خطی، تراز مرکزی را قرار دهید. به مسدود کردنزیر نیفتاد عنصر شبهزمانی که ابعاد اولی بزرگتر از والدین، مشخص كردن والدینفضای سفید: nowrap و اندازه قلم: 0 که بعد از آن y مسدود کردناین سبک ها را با موارد زیر لغو کنید - فضای سفید: عادی. در این مثال، اندازه فونت: 0 برای حذف فضای بین آن لازم است والدینو مسدود کردندر ارتباط با قالب بندی کد این شکاف را می توان به روش های دیگری از بین برد، اما بهتر است به سادگی اجازه ندهید.

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ سرریز: خودکار؛ فضای سفید: nowrap؛ تراز متن: مرکز؛ اندازه قلم: 0؛ و: قبل ( ارتفاع: 100٪؛ صفحه نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ محتوا: ""؛ ) ) .block (نمایش: بلوک درون خطی؛ فضای سفید: عادی؛ تراز عمودی: وسط؛ تراز نوشتاری: سمت چپ ; img (نمایش: بلوک؛ حاشیه: هیچ؛ ))

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

والد (موقعیت: ثابت؛ بالا: 0؛ راست: 0؛ پایین: 0؛ چپ: 0؛ سرریز: خودکار؛ فضای سفید: nowrap؛ تراز متن: مرکز؛ اندازه قلم: 0؛ &: قبل (ارتفاع: 100%؛ نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ محتوا: ""؛ ) ) .block (نمایش: بلوک درون خطی؛ فضای سفید: عادی؛ تراز عمودی: وسط؛ تراز متن: چپ؛ img (نمایش: بلوک؛ حاشیه: هیچ؛ ) )

گزینه 5. Flexbox.

یکی از ساده ترین و زیباترین راه ها استفاده از فلکس باکس است. این نیازی به حرکات غیر ضروری بدن ندارد، ماهیت آنچه را که اتفاق می افتد کاملاً واضح توصیف می کند و انعطاف پذیری بالایی دارد. تنها چیزی که هنگام انتخاب این روش باید به خاطر بسپارید پشتیبانی از IE از نسخه 10 فراگیر است. caniuse.com/#feat=flexbox

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛ نمایشگر: انعطاف‌پذیر؛ تراز موارد: مرکز؛ تراز کردن محتوای: مرکز؛ توجیه محتوا: مرکز؛ سرریز: خودکار ) .block ( پس زمینه: #60a839; img (نمایش: بلوک؛ حاشیه: هیچ، ))

گزینه 6. تبدیل.

اگر توسط ساختار محدود شده باشیم، مناسب است و راهی برای دستکاری عنصر والد وجود ندارد، اما بلوک باید به نحوی تراز شود. تابع translate() css به کمک خواهد آمد. مقدار 50٪ موقعیت مطلق، گوشه سمت چپ بالای جعبه را دقیقاً در مرکز قرار می دهد، سپس یک مقدار ترجمه منفی، کادر را نسبت به ابعاد خودش جابه جا می کند. لطفاً توجه داشته باشید که اثرات منفی ممکن است به شکل لبه‌های تار یا سبک قلم ظاهر شوند. همچنین، روش مشابهی می‌تواند منجر به مشکلاتی در محاسبه موقعیت بلوک با استفاده از java-script a. بلوک می تواند کمک کند: margin-right: -50%؛ .

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ ) .block ( موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ تبدیل: ترجمه( -50٪، -50٪؛ img (نمایش: بلوک؛ ))

گزینه 7. دکمه.

گزینه azproduction کاربر که در آن مسدود کردندر یک برچسب دکمه پیچیده شده است. دکمه این قابلیت را دارد که هر چیزی را که در داخل آن قرار دارد، یعنی عناصر مدل inline و block-line (inline-block) را در مرکز قرار دهد. من آن را در عمل توصیه نمی کنم.

والد (عرض: 100%؛ ارتفاع: 100%؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ سرریز: خودکار؛ پس‌زمینه: هیچکدام؛ حاشیه: هیچ؛ طرح کلی: هیچکدام؛ ) .block (نمایش: بلوک درون خطی؛ img (نمایش: بلوک؛ حاشیه: هیچکدام؛ ))

جایزه

با استفاده از ایده گزینه 4 می توانید برای آن حاشیه تعیین کنید مسدود کردن، و در همان زمان دومی به اندازه کافی در محیط اسکرول بارها نمایش داده می شود.
مثال: jsfiddle.net/serdidg/nfqg9rza/2.

همچنین می توانید تصویر را در مرکز، و اگر تصویر بزرگتر باشد، تراز کنید والدین، آن را به اندازه اندازه گیری کنید والدین.
مثال: jsfiddle.net/serdidg/nfqg9rza/3.
مثال تصویر بزرگ:

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

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

دو نوع اصلی ساختمان سازه سایت وجود دارد:

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

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

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

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

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

بلوک سازی ساختمان بر اساس برچسب ها