اگر وب سایتی را که در آن ایجاد شده است برش دهید مبتنی بر html، سپس یک ساختار لایه به لایه مشخص در مقابل شما ظاهر می شود. علاوه بر این، با خودش ظاهرشبیه کیک لایه ای خواهد بود. اگر برای شما اینطور به نظر می رسد، به احتمال زیاد برای مدت طولانی غذا نخورده اید. بنابراین ابتدا گرسنگی خود را برطرف کنید و سپس به شما خواهیم گفت که چگونه یک لایه div را در سایت خود متمرکز کنید:
مزایای طرح بندی با استفاده از برچسبدو نوع ساختار اصلی وب سایت وجود دارد:
- جدولی;
- مسدود کردن.
چیدمان جدولی حتی در سپیده دم اینترنت نیز غالب بود. از مزایای آن می توان به دقت موقعیت یابی مشخص شده اشاره کرد. اما، با این وجود، معایب آشکاری دارد. اصلی ترین آنها حجم کد و سرعت کمدانلودها
هنگام استفاده از طرح بندی جدول، صفحه وب تا زمانی که نمایش داده نمی شود بارگذاری کامل. در حالی که هنگام استفاده از بلوک های div، عناصر بلافاصله نمایش داده می شوند.
بجز سرعت بالاساخت بلوک بارگذاری سایت به شما امکان می دهد تا چندین بار حجم را کاهش دهید کد html. از جمله از طریق استفاده از کلاس های CSS.
با این حال، طرح بندی جدولی باید برای ساختار نمایش داده ها در صفحه استفاده شود. نمونه کلاسیک استفاده از آن نمایش جداول است.
ساخت بلوک بر اساس تگ ها را لایه به لایه نیز می گویند و خود بلوک ها را لایه می نامند. این به این دلیل است که وقتی از مقادیر خاصی استفاده می‌شود، می‌توان آنها را مانند لایه‌های فتوشاپ روی هم قرار داد.
کمک های موقعیت یابیکه در طرح بلوکبهتر است لایه ها را با استفاده از شیوه نامه های آبشاری قرار دهید. ویژگی اصلی CSS که مسئول layout است float است.
نحو ویژگی:
شناور: چپ | راست | هیچکدام | به ارث می برند
جایی که:
- سمت چپ - عنصر را در لبه چپ صفحه تراز کنید. جریان اطراف عناصر باقی مانده در سمت راست رخ می دهد.
- راست - تراز در سمت راست، جریان در اطراف عناصر دیگر - در سمت چپ.
- هیچ - بسته بندی مجاز نیست.
- ارث بردن - ارث بردن ارزش عنصر والد.
بیایید به یک مثال سبک وزن از موقعیت یابی div ها با استفاده از این ویژگی نگاه کنیم:
# چپ ( عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: چپ؛ پس‌زمینه: rgb(255،51،102؛ ) #راست (عرض: 200 پیکسل؛ ارتفاع: 100 پیکسل؛ شناور: راست؛ پس‌زمینه: rgb(0،255،153)؛ ) بلوک چپ بلوک سمت راست
اکنون سعی می کنیم از همان ویژگی برای قرار دادن سومین div در مرکز صفحه استفاده کنیم. اما متاسفانه float ارزش مرکزی ندارد. و هنگامی که به یک بلوک جدید مقدار تراز به راست یا چپ می دهید، در جهت مشخص شده جابجا می شود. بنابراین، تنها چیزی که باقی می ماند این است که float: چپ به هر سه بلوک:
اما این نیست بهترین گزینه. وقتی پنجره کوچکتر شد، همه لایه ها در یک ردیف به صورت عمودی ردیف می شوند و وقتی اندازه زیاد شد، به لبه سمت چپ پنجره می چسبند. بنابراین ما به روش بهتری برای وسط div نیاز داریم. لایه های مرکزی
که در مثال زیرما از یک لایه ظرف استفاده می کنیم که عناصر باقی مانده را در آن قرار می دهیم. با تغییر اندازه پنجره، مشکل حرکت بلوک ها نسبت به یکدیگر حل می شود. وسط قرار دادن ظرف در وسط با تنظیم حاشیه خواص انجام می شود مقدار صفرحاشیه از لبه بالایی و خودکار در طرفین (حاشیه: 0 خودکار):
#کانتینر ( عرض: 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 خالص، div خود را به صورت افقی و عمودی در مرکز قرار دهید. به عنوان مثال، هنگام ایجاد پنجره های بازشو با . راه‌های مختلفی برای پیاده‌سازی مرکز وجود دارد و در این مقاله راه‌های مورد علاقه و ساده‌ترین راه‌های خود را با استفاده از CSS یا jQuery به اشتراک می‌گذارم.
اول، اصول اولیه:
مرکز افقی در CSSانجام این کار آسان است، ما استفاده می کنیم لبهبرای ما بخشمسدود کردن.
نام کلاس (حاشیه: 0 خودکار؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ )
برای وسط بلوک تقسیمفقط به صورت افقی، باید عرض بلوک (عرض) را تعریف کنید، از ویژگی auto برای حاشیه چپ و راست استفاده کنید. این روش برای تمام عناصر بلوک (div، p، h1، و غیره ...) کار خواهد کرد. برای اعمال مرکز افقی به عناصر درون خطی (پیوندها، تصاویر...)، باید نمایشگر را اعمال کنید: block;
مرکز افقی و عمودی در CSSقرار دادن یک بلوک div به صورت افقی و عمودی به طور همزمان کمی پیچیده تر است. شما باید ابعاد بلوک div را از قبل بدانید.
ClassName( عرض: 300 پیکسل؛ ارتفاع: 200 پیکسل؛ موقعیت: مطلق؛ سمت چپ: 50 درصد؛ بالا: 50 درصد؛ حاشیه: - 100 پیکسل 0 0 - 150 پیکسل؛ )
با استفاده از موقعیت‌یابی مطلق یک بلوک، می‌توانیم آن را از عناصر اطراف جدا کنیم و موقعیت آن را نسبت به اندازه پنجره مرورگر تعیین کنیم. بلوک div را 50% به سمت چپ و بالای پنجره حرکت دهید. گوشه سمت چپ بالای بلوک اکنون در مرکز پنجره مرورگر است. تنها چیزی که باقی می ماند این است که بلوک div را در مرکز صفحه قرار دهید و نیمی از عرض آن را به سمت چپ و نیمی از ارتفاع آن را به سمت بالا ببرید. هورا! نتیجه، مرکز عالی بلوک بود css خالصکد
مرکز افقی و عمودی با جی کوئریهمانطور که قبلا ذکر شد - روش CSSمرکز کردن فقط با ابعاد ثابت کار می کند. اگر ابعاد تعریف نشده باشند، متد jQuery به کمک می آید:
$(window).resize(function())($(".className").css(( موقعیت:"مطلق"، سمت چپ: ($(window).width() - $(".className").outerWidth ( ))/2، بالا: ($(window).height() - $(".className").outerHeight())/2 )); // برای اجرای تابع هنگام بارگذاری پنجره: $(window).resize();
عمل این روشاجرای تابع resize() با استفاده از خط $(window).resize() است. این تابع هر زمان که اندازه پنجره مرورگر تغییر کند کار می کند. ما از outerWidth() و outerHeight() استفاده می کنیم، زیرا بر خلاف width() و height() آنها شامل padding و ضخامت حاشیه ها در اندازه ای هستند که برمی گردند. آخرین خط فرآیند مرکزیت کردن بلوک div را هنگام بارگیری صفحه آغاز می کند.
مزیت استفاده از این روش این است که ممکن است ندانید دیو چه اندازه است. عیب اصلی- این فقط زمانی کار می کند که جاوا اسکریپت فعال باشد. بنابراین، این روش برای رابط های چند منظوره مانند VKontakte، Facebook و غیره قابل قبول است.
مثل همیشه، با نظر دادن، روش مورد علاقه خود را برای وسط بلوک ها پیشنهاد دهید.چند نسخه قبلاً در مورد وظیفه تراز کردن عناصر در یک صفحه شکسته شده است. ترجمه مقاله ای عالی با راه حلی برای این مشکل از استفن شاو برای مجله Smashing - Absolute Horizontal And Vertical Centering In CSS به شما توجه می کنم.
همه ما در مورد حاشیه می دانستیم: 0 خودکار; برای مرکز افقی، اما حاشیه: خودکار. برای عمودی کار نکرد این را می توان به سادگی با تنظیم ارتفاع و اعمال سبک های زیر به راحتی برطرف کرد:
مرکز مطلق (حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ )
من اولین کسی نیستم که این راه حل را پیشنهاد می کنم، اما این روش به ندرت زمانی استفاده می شود چیدمان عمودی. Simon در نظرات مقاله How to Central Anything With CSS به یک مثال jsFiddle اشاره می کند که ارائه می کند راه حل کاملبرای مرکز عمودی در اینجا چند مورد دیگر در مورد این موضوع وجود دارد.
بیایید نگاهی دقیق تر به روش بیندازیم.
مزایای- سازگاری بین مرورگرها (از جمله IE 8-10)
- بدون نشانه گذاری اضافی، حداقل یک ظاهر طراحی شده
- تطبیق پذیری
- استقلال از بالشتک (بدون اندازه جعبه!)
- برای تصاویر کار می کند
- ارتفاع باید مشخص شود (ارتفاع متغیر را ببینید)
- توصیه می شود سرریز: خودکار را تنظیم کنید تا محتوا پخش نشود
- روی ویندوز فون کار نمی کند
مطلق-مرکز (عرض: 50%؛ ارتفاع: 50%؛ سرریز: خودکار؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ سمت راست: 0؛ )
استفاده از viewport محتوا را در موقعیت: ثابت قرار دهید و z-index را تنظیم کنید:Absolute-Center.is-Fixed (عرض: 50%؛ ارتفاع: 50%؛ سرریز: خودکار؛ حاشیه: خودکار؛ موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ شاخص z: 999)
Absolute-Center.is-Responsive (عرض: 60%؛ ارتفاع: 60%؛ حداقل عرض: 400 پیکسل؛ حداکثر عرض: 500 پیکسل؛ بالشتک: 40 پیکسل؛ سرریز: خودکار؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0. سمت چپ: 0; پایین: 0; 
همچنین می توانید محتوا را در سمت مورد نظر تراز کنید و ارتفاع را در مرکز قرار دهید. برای انجام این کار باید از سمت راست استفاده کنید: 0; سمت چپ: خودکار؛ برای تراز راست یا چپ: 0; سمت راست: خودکار؛ برای تراز چپ
Absolute-Center.is-Right ( عرض: 50%؛ ارتفاع: 50%؛ حاشیه: خودکار؛ سرریز: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: خودکار؛ پایین: 0؛ راست: 20 پیکسل؛ تراز متن: درست؛ 
مطلق : 0 ;
تصاویر این روش برای تصاویر نیز عالی عمل می کند! اضافه کردن ارتفاع سبک: خودکار. سپس تصویر به همراه ظرف بزرگ می شود. Absolute-Center.is-Image (عرض: 50%؛ ارتفاع: خودکار؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ ) 
ممکن است مشکلاتی در سازگاری بین مرورگرها وجود داشته باشد، شاید باید از روش سلول جدول (که در زیر توضیح داده شده است) استفاده کنید.
- Firefox/IE8: با استفاده از نمایشگر: جدول بلوک را به صورت عمودی با بالای سند تراز می کند.
- IE9/10: استفاده از صفحه نمایش: جدول بلوک را به سمت چپ تراز می کند گوشه بالاصفحات
- Mobile Safari: اگر عرض بر روی درصد تنظیم شود، مرکز افقی آسیب می بیند
روش‌های دیگر روش توصیف‌شده در بیشتر موارد به خوبی کار می‌کند، اما روش‌های دیگری نیز وجود دارد که احتمالاً بیشترین کاربرد را برای حل مشکلات خاص دارند راه محبوب. اگر ابعاد بلوک مشخص باشد مناسب است. Is-Negative (عرض: 300 پیکسل؛ ارتفاع: 200 پیکسل؛ بالشتک: 20 پیکسل؛ موقعیت: مطلق؛ بالا: 50 درصد؛ سمت چپ: 50 درصد؛ حاشیه سمت چپ: -170 پیکسل؛ /* (عرض + بالشتک)/2 */ حاشیه- بالا: -120px /* (ارتفاع + بالشتک)/2 */)
مزایای:
- سازگاری بین مرورگرها
- حداقل کد
- سازگار نیست
- اگر محتوای بیش از حد در ظرف وجود داشته باشد، چیدمان به هم می‌خورد
- باید بالشتک را جبران کنید یا از box-sizing: border-box استفاده کنید
Is-Transformed (عرض: 50%؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ -webkit-transform: translate(-50%,-50%)؛ -ms-transform: translate( -50%, -50%);
مزایای:
- ارتفاع متغیر
- حداقل کد
- در IE 8 کار نمی کند
- استفاده از پیشوندها
- ممکن است با سایر اثرات تبدیل تداخل داشته باشد
- در برخی موارد، لبه های بلوک و متن در حین رندر محو می شوند
<!-- محتوا -->
CSS:
.Pos-Container.is-Table (نمایش: جدول؛) .is-Table .Table-Cell (نمایش: سلول جدول؛ تراز عمودی: وسط؛) .is-Table .Center-Block (عرض: 50%; حاشیه: 0 خودکار;
مزایای:
- ارتفاع متغیر
- چیدمان زمانی کار نمی کند مقادیر زیادمتن در بلوک
- سازگاری بین مرورگرها
- ساختار پیچیده
Pos-Container.is-Flexbox ( نمایشگر: -webkit-box؛ نمایش: -moz-box؛ نمایش: -ms-flexbox؛ نمایش: -webkit-flex؛ نمایش: flex؛ -webkit-box-align: مرکز؛ - moz-box-align: -ms-flex-align: center -webkit-box-pack: -ms-flex-content; : مرکز;
مزایای:
- محتوا می تواند هر ارتفاع یا عرضی داشته باشد
- در موارد پیچیده تر قابل استفاده است
- بدون پشتیبانی از IE 8-9
- به ظرف یا سبک در بدن نیاز دارد
- به پیشوندهای مختلفی نیاز دارد عملکرد صحیحدر مرورگرهای مدرن
- مشکلات عملکردی احتمالی
چند نسخه قبلاً در مورد وظیفه تراز کردن عناصر در یک صفحه شکسته شده است. ترجمه مقاله ای عالی با راه حلی برای این مشکل از استفن شاو برای مجله Smashing - Absolute Horizontal And Vertical Centering In CSS به شما توجه می کنم.
همه ما در مورد حاشیه می دانستیم: 0 خودکار; برای مرکز افقی، اما حاشیه: خودکار. برای عمودی کار نکرد این را می توان به سادگی با تنظیم ارتفاع و اعمال سبک های زیر به راحتی برطرف کرد:
مرکز مطلق (حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ )
من اولین کسی نیستم که این راه حل را پیشنهاد می کنم، اما این رویکرد به ندرت برای تراز عمودی استفاده می شود. در نظرات مقاله چگونه هر چیزی را با CSS در مرکز قرار دهیم، Simon به یک مثال jsFiddle پیوند می‌دهد که راه‌حل عالی برای وسط عمودی ارائه می‌دهد. در اینجا چند مورد دیگر در مورد این موضوع وجود دارد.
بیایید نگاهی دقیق تر به روش بیندازیم.
مزایای- سازگاری بین مرورگرها (از جمله IE 8-10)
- بدون نشانه گذاری اضافی، حداقل یک ظاهر طراحی شده
- تطبیق پذیری
- استقلال از بالشتک (بدون اندازه جعبه!)
- برای تصاویر کار می کند
- ارتفاع باید مشخص شود (ارتفاع متغیر را ببینید)
- توصیه می شود سرریز: خودکار را تنظیم کنید تا محتوا پخش نشود
- روی ویندوز فون کار نمی کند
مطلق-مرکز (عرض: 50%؛ ارتفاع: 50%؛ سرریز: خودکار؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ سمت راست: 0؛ )
استفاده از viewport محتوا را در موقعیت: ثابت قرار دهید و z-index را تنظیم کنید:Absolute-Center.is-Fixed (عرض: 50%؛ ارتفاع: 50%؛ سرریز: خودکار؛ حاشیه: خودکار؛ موقعیت: ثابت؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ شاخص z: 999)
Absolute-Center.is-Responsive (عرض: 60%؛ ارتفاع: 60%؛ حداقل عرض: 400 پیکسل؛ حداکثر عرض: 500 پیکسل؛ بالشتک: 40 پیکسل؛ سرریز: خودکار؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0. سمت چپ: 0; پایین: 0;
همچنین می توانید محتوا را در سمت مورد نظر تراز کنید و ارتفاع را در مرکز قرار دهید. برای انجام این کار باید از سمت راست استفاده کنید: 0; سمت چپ: خودکار؛ برای تراز راست یا چپ: 0; سمت راست: خودکار؛ برای تراز چپ
Absolute-Center.is-Right ( عرض: 50%؛ ارتفاع: 50%؛ حاشیه: خودکار؛ سرریز: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: خودکار؛ پایین: 0؛ راست: 20 پیکسل؛ تراز متن: درست؛
مطلق : 0 ;
تصاویر این روش برای تصاویر نیز عالی عمل می کند! اضافه کردن ارتفاع سبک: خودکار. سپس تصویر به همراه ظرف بزرگ می شود. Absolute-Center.is-Image (عرض: 50%؛ ارتفاع: خودکار؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ )
ممکن است مشکلاتی در سازگاری بین مرورگرها وجود داشته باشد، شاید باید از روش سلول جدول (که در زیر توضیح داده شده است) استفاده کنید.
- Firefox/IE8: با استفاده از نمایشگر: جدول بلوک را به صورت عمودی با بالای سند تراز می کند.
- IE9/10: با استفاده از نمایشگر: جدول بلوک را در گوشه سمت چپ بالای صفحه تراز می کند.
- Mobile Safari: اگر عرض بر روی درصد تنظیم شود، مرکز افقی آسیب می بیند
روش های دیگر روش توصیف شده در بیشتر موارد عالی عمل می کند، اما روش های دیگری نیز وجود دارد که می توان از آنها برای حل مشکلات خاص استفاده کرد. احتمالاً محبوب ترین روش است. اگر ابعاد بلوک مشخص باشد مناسب است. Is-Negative (عرض: 300 پیکسل؛ ارتفاع: 200 پیکسل؛ بالشتک: 20 پیکسل؛ موقعیت: مطلق؛ بالا: 50 درصد؛ سمت چپ: 50 درصد؛ حاشیه سمت چپ: -170 پیکسل؛ /* (عرض + بالشتک)/2 */ حاشیه- بالا: -120px /* (ارتفاع + بالشتک)/2 */)
مزایای:
- سازگاری بین مرورگرها
- حداقل کد
- سازگار نیست
- اگر محتوای بیش از حد در ظرف وجود داشته باشد، چیدمان به هم می‌خورد
- باید بالشتک را جبران کنید یا از box-sizing: border-box استفاده کنید
Is-Transformed (عرض: 50%؛ حاشیه: خودکار؛ موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ -webkit-transform: translate(-50%,-50%)؛ -ms-transform: translate( -50%, -50%);
مزایای:
- ارتفاع متغیر
- حداقل کد
- در IE 8 کار نمی کند
- استفاده از پیشوندها
- ممکن است با سایر اثرات تبدیل تداخل داشته باشد
- در برخی موارد، لبه های بلوک و متن در حین رندر محو می شوند
<!-- محتوا -->
CSS:
.Pos-Container.is-Table (نمایش: جدول؛) .is-Table .Table-Cell (نمایش: سلول جدول؛ تراز عمودی: وسط؛) .is-Table .Center-Block (عرض: 50%; حاشیه: 0 خودکار;
مزایای:
- ارتفاع متغیر
- وقتی مقدار زیادی متن در یک بلوک وجود دارد، طرح‌بندی کار نمی‌کند
- سازگاری بین مرورگرها
- ساختار پیچیده
Pos-Container.is-Flexbox ( نمایشگر: -webkit-box؛ نمایش: -moz-box؛ نمایش: -ms-flexbox؛ نمایش: -webkit-flex؛ نمایش: flex؛ -webkit-box-align: مرکز؛ - moz-box-align: -ms-flex-align: center -webkit-box-pack: -ms-flex-content; : مرکز;
مزایای:
- محتوا می تواند هر ارتفاع یا عرضی داشته باشد
- در موارد پیچیده تر قابل استفاده است
- بدون پشتیبانی از IE 8-9
- به ظرف یا سبک در بدن نیاز دارد
- برای اینکه در مرورگرهای مدرن به درستی کار کند، به طیف گسترده ای از پیشوندها نیاز دارد
- مشکلات عملکردی احتمالی
در فرآیند چیدمان صفحات وب، وظیفه متمرکز کردن بلوک ها بسیار رایج است. این می تواند عمودی یا افقی وسط باشد.
به عنوان مثال، اگر سایت دارای عرض ثابت، تراز کردن آن در مرکز پنجره مرورگر منطقی است، زیرا این کار خواندن متن را آسان‌تر می‌کند (مخصوصاً اگر مانیتور بزرگ باشد). برخی از طرح‌ها عموماً شامل قرار دادن بلوک در مرکز پنجره مرورگر هستند، یعنی هم مرکز افقی و هم عمودی.
ابتدا اجازه دهید در مورد مرکز افقی صحبت کنیم. محبوب‌ترین روش این است که بلوک را در مرکز قرار دهید با تنظیم حاشیه‌های راست و چپ روی «خودکار». فرض کنید می خواهیم یک بلوک را با id = "container" و عرض 860 پیکسل در مرکز قرار دهیم. در این مورد، در فایل CSSباید بنویسی:
#ظرف (
background-color:#EEE;
عرض: 860 پیکسل
حاشیه: 0 پیکسل خودکار;
}
با این حال، I.E. نسخه های قدیمی تر (به عنوان مثال 5.0) این بلوک را در مرکز قرار نمی دهند. البته، هیچ کس دیگر از چنین مرورگرهای قدیمی استفاده نمی کند (از 1800 بازدید کننده روزانه من - فقط 1)، اما در هر صورت، بهتر است آن را در آنجا نیز کار کنید :)
برای انجام این کار، عنصر والد، یعنی عنصری که بلوک خود را درون آن متمرکز می کنیم (معمولاً عنصر والد BODY را تگ کنید)، باید پارامتر text-align:center را تنظیم کنید. در این صورت بلوک با مرکز تراز می شود، اما تمام محتویات آن نیز با مرکز تراز می شود، اما ما به آن نیاز نداریم. بنابراین، در داخل این بلوک، تراز پیش‌فرض را تنظیم می‌کنیم - text-align:left.
بدنه (Text-align:center)
#ظرف (
background-color:#EEE;
عرض: 860 پیکسل
حاشیه: 0 پیکسل خودکار;
text-align:left;
}
راه دیگری نیز وجود دارد تراز افقیبلوک بر اساس . همانطور که احتمالا می دانید، به طور پیش فرض، هر عنصر بلوکی در لبه سمت چپ عنصر والد فشار داده می شود. بنابراین، برای تراز کردن آن با مرکز به موارد زیر نیاز دارید:
2. آن را 50 درصد از عرض پنجره مرورگر به سمت راست حرکت دهید
3. با استفاده از بالشتک منفی، آن را با فاصله ای معادل نصف عرض بلوک به سمت چپ حرکت دهید.
به این ترتیب بلوک در مرکز قرار می گیرد. برای وضوح بیشتر، ویدیوی زیر را تماشا کنید:
کد CSS مثال:
#ظرف (
background-color:#559964;
موقعیت: مطلق;
سمت چپ:50%;
margin-left:-430px;
عرض: 860 پیکسل
}
لازم به ذکر است که اگر می خواهید یک بلوک را نه نسبت به پنجره مرورگر، بلکه به عنوان مثال، نسبت به بلوک دیگر قرار دهید، برای این بلوک دیگر باید موقعیت را تنظیم کنید: relative;
فرض کنید بلوک #کانتینر ما، که باید در مرکز قرار گیرد، درون بلوک #wrap قرار دارد. سپس کد به شکل زیر خواهد بود:
#wrap(موقعیت:نسبی)
#ظرف (
background-color:#559964;
موقعیت: مطلق;
سمت چپ:50%;
margin-left:-430px;
عرض: 860 پیکسل
}
حالا بیایید به موردی نگاه کنیم که باید یک بلوک را در مرکز صفحه تراز کنید، یعنی. وسط افقی و عمودی را به طور همزمان اعمال کنید. موقعیت یابی دوباره در اینجا وارد عمل می شود. بنابراین ما نیاز داریم:
1. بلوک را تنظیم کنید موقعیت یابی مطلق
2. آن را 50% به سمت راست و 50% به پایین ببرید و بدین ترتیب گوشه سمت چپ بالای آن را در مرکز پنجره مرورگر قرار دهید.
3. با استفاده از بالشتک منفی، آن را با فاصله ای معادل نیمی از ارتفاع بلوک به سمت بالا و با فاصله ای معادل نیمی از عرض بلوک به سمت چپ حرکت دهید.
این بلوک را در مرکز صفحه وب قرار می دهد.
فرض کنید ارتفاع بلوک ما 600 پیکسل و عرض آن 860 پیکسل است. سپس کد CSS به شکل زیر خواهد بود:
#ظرف (
background-color:#559964;
موقعیت: مطلق;
بالا:50%;
سمت چپ:50%;
margin-top: -300px;
margin-left:-430px;
ارتفاع: 600 پیکسل
عرض: 860 پیکسل
}
امیدوارم خود اصل برای شما روشن باشد.
به درس امتیاز دهید: 1 2 3 4 5
نظرات:
من اولین نفری هستم که درس را می بینم!!!
اه... دوم =) من اخیراً در IE با این مشکل مواجه شدم، مدت زیادی رنج کشیدم)) ممنون =)
با تشکر از شما، صفحه نشانک شده)))
بسیار متشکرم، آندری، برای درس های جدید!
فقط از شما متشکرم، فکر نمی کنم چیزی برای اضافه کردن در اینجا وجود داشته باشد))
با تشکر از درس، من به معنای واقعی کلمه سعی کردم این کار را چند روز پیش انجام دهم، کمی زجر کشیدم و موقتا آن را کنار گذاشتم
اما من یک مشکل دارم: سایت در موزیل فایرفاکس نمی خواهد تراز شود، به لبه سمت چپ چسبیده است و تمام است، هیچ یک از موارد بالا کمک نمی کند (همانطور در Opera).
چرا این کار نمی کند؟ - "اگر می خواهید یک بلوک را نه نسبت به پنجره مرورگر، بلکه به عنوان مثال، نسبت به بلوک دیگر قرار دهید، برای این بلوک دیگر باید موقعیت را تنظیم کنید: relative;"
خیلی ممنون از شما فقط یک غول ممنونم!
همه چیز خوب است، اما به دلایلی همه تصاویر تنها پس از به روز رسانی مرورگر در جای خود قرار می گیرند. لطفا به من بگویید چرا این اتفاق می افتد؟
آندری، لطفا یک جستجوی سایت اضافه کنید.
یک نظر اضافه کنید.
