محور: CSS-طرح

هنگامی که طرح از صفحه است که اغلب لازم را به یک محور CSS-راه: به عنوان مثال، به مرکز واحد اصلی. چندین راه حل برای این مشکل، که هر کدام دیر یا زود مجبور به استفاده از هر رمز گذار وجود دارد.

تراز متن به مرکز

اغلب برای اهداف تزئینی شما می خواهید به مجموعه ای از متن محور، CSS در این مورد، به منظور کاهش زمان اعمال. پیش از این با استفاده از HTML-صفات انجام شد، اما در حال حاضر از استاندارد مورد نیاز برای تراز متن را با شیوه نامه است. در مقابل به بلوک که برای آن شما می خواهید به تغییر لایه خارجی در تراز CSS از متن در وسط است با یک خط ساخته شده است:

• تراز متن: مرکز؛

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

صفحات اغلب صفت align به خود برچسب. این بلافاصله باعث می شود کد نامعتبر، از W3C اذعان صفت align منسوخ باشد. با استفاده از آن بر روی یک صفحه توصیه نمی شود.

بلوک محور

اگر شما می خواهید به مجموعه ای از ترازی از div در وسط، CSS می تواند کاملا یک راه راحت ارائه می دهیم: استفاده از حاشیه بالشتک خارجی. پارچه کشی می تواند به عنوان عناصر بلوک، و خط بلوک مشخص شده است. ارزش Svoysva باید 0 (بالشتک عمودی)، و خودکار (دندانه اتوماتیک به صورت افقی) باشد:

• حاشیه: 0 خودکار؛

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

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

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

• .left {شناور: سمت چپ؛}
• .right {شناور: سمت راست}

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

• .left {شناور: سمت چپ؛}
• .right {شناور: سمت راست}
• بالا و پایین صفحه {روشن است: هر دو}

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

چیدمان عمودی

مواردی که در آن به اندازه کافی برای تنظیم تراز دلخواه برای مرکز CSS-راه وجود دارد، شما همچنین باید موقعیت عمودی بلوک کودک را تغییر دهید. هر عنصر خط و یا ردیف بلوک را می توان در مقابل لبه بالایی یا پایینی فشرده، واقع در وسط عنصر پدر و مادر و یا در یک مکان دلخواه باشد. اغلب نیاز به تراز دلخواه برای مرکز بلوک، آن را با استفاده از ویژگی تراز عمودی. فرض کنید دو بلوک، یکی تو در تو در دیگر وجود دارد. در این واحد داخلی - عنصر ردیف بلوک (از display: inline-block) هستند. لازم است به چین کودک بلوک عمودی:

• هم ترازی از مرز بالایی - .child {عمودی تراز: بالا}؛
• محور - .child {عمودی تراز: وسط}؛
• هم ترازی از لبه پایین - .child {عمودی تراز: پایین}؛

در عناصر بلوک های صوتی تراز متن، و یا عمودی تراز صدق نمی کند.

مشکلات ممکن است با واحد تراز

گاهی اوقات DIV چین مرکز CSS-راه می تواند کمی مشکل شود. به عنوان مثال، در هنگام استفاده از یک شناور: به عنوان مثال، سه بلوک وجود دارد: .first، .second و .third. بلوک های دوم و سوم در اولین قرار دارند. یک عنصر با یک کلاس دوم در تراز چپ قرار، و آخرین بلوک - در سمت راست. پس از هماهنگی این دو را از جریان کاهش یافته است. اگر عنصر پدر و مادر است ارتفاع تعریف نشده (به عنوان مثال، 30em)، آن را متوقف خواهد کرد به کشش ارتفاع واحدهای تابعه. برای جلوگیری از این خطا، استفاده از "فضا" - یک واحد ویژه، که می بیند .second و .third. CSS-کد:

• .second {شناور: سمت چپ}
• .third {شناور: سمت راست}
• .clearfix {ارتفاع: 0؛ روشن است: هر دو؛}

شبه اغلب استفاده می شود: پس از آن، که همچنین اجازه می دهد برای بازگشت به بلوک را به محل با ایجاد psevdorasporki (در مثال در div با کلاس نهفته است در داخل ظرف و شامل .left .first و .right):

• .left {شناور: سمت چپ}
• .right {شناور: سمت راست}
• .container: بعد از {محتوای: ""؛ صفحه نمایش: جدول. روشن است: هر دو؛}

گزینه های بالا - رایج ترین، اگر چه برخی تغییرات وجود دارد. شما همیشه می توانید ساده ترین و راحت ترین راه برای ایجاد psevdorasporki توسط آزمایش پیدا

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

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