هماهنگی عنصر افقی و عمودی. تراز عمودی عناصر با CSS

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

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

رویکردهای زیر را مقایسه کنید. تراز کردن با:

جداول،
مردن
ارتفاع خط،
کشش
حاشیه منفی
تبدیل،
شبه عنصر
flexbox

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

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

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

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

Npomnia که هماهنگی تنها به عناصری که دارای یک حالت نمایشگر درون خطی یا خطی هستند، اعمال می شود.

ما ابعاد بلوک ها و همچنین رنگ های پس زمینه را برای دیدن مرزهای خود تنظیم می کنیم.

بیرونی (عرض: 200px؛ ارتفاع: 200px؛ text-align: center؛ align-align: middle؛ background-color: #ffc؛) inner (صفحه نمایش: inline-block؛ عرض: 100px؛ ارتفاع: 100px؛ پس زمینه رنگ: #fcc؛)
پس از استفاده از سبک ها، ما خواهیم دید که بلوک داخلی به صورت افقی قرار گرفت و هیچ عمودی وجود ندارد:
http://jsfiddle.net/c1bgfffq/

چرا این اتفاق افتاد؟ واقعیت این است که اموال عمودی-ALIGN بر هماهنگی تاثیر می گذارد عنصر خود، و نه محتویات آن (به جز زمانی که آن را به سلول های جدول اعمال می شود). بنابراین، برنامه این ویژگی این چیزی را به عنصر خارجی نمی دهد. علاوه بر این، استفاده از این ملک به عنصر داخلی نیز هر چیزی را ارائه می دهد، از آنجا که بلوک های کوچک (بلوک درون خطی) به صورت عمودی نسبت به بلوک های همسایه تراز می شوند و در مورد ما یک بلوک کوچک داریم.

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

تراز کردن با استفاده از جدول

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

http://jsfiddle.net/c1bgfffq/1///

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

اولین منهای می تواند تا حدی حذف شود، جایگزین جدول و تگ های TD در DIV و تنظیم حالت جدول نمایش در CSS.

.OTER-WRAPPER (نمایش: جدول؛) .OTER (نمایش: سلول جدول؛)
با این وجود، واحد خارجی همچنان یک جدول با تمام عواقب این است.

هماهنگی با دندانه دار

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

بیرونی (ارتفاع: 200px؛) .inner (ارتفاع: 100px؛ حاشیه: 50px 0؛)
http://jsfiddle.net/c1bgfffq/6/

منهای راه حل های منهای - آن را تنها به تعداد محدودی از موارد زمانی که هر دو بلوک شناخته شده است اعمال می شود.

تراز بندی خط ارتفاع

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

بیرونی (ارتفاع: 200px؛ ارتفاع خط: 200px؛) .NNER (فضای سفید: NowRap؛ سرریز: پنهان؛)
http://jsfiddle.net/c1bgfffq/12/

همچنین، این تکنیک همچنین می تواند به ترتیب متن چند خطی اعمال شود اگر برای واحد داخلی برای لغو مقدار ارتفاع خط، و همچنین افزودن صفحه نمایش: بلوک درون خطی و عمودی-align: middle.

بیرونی (ارتفاع: 200px؛ ارتفاع خط: 200px؛) .NNER (خط ارتفاع: عادی؛ صفحه نمایش: Inline-Block؛ عمودی-align: middle؛)
http://jsfiddle.net/c1bgfffq/15/

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

هماهنگی با "کشش"

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

برای این شما نیاز دارید:

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

.OTER (موقعیت: نسبی؛) داخلی (ارتفاع: 100px؛ موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ حاشیه: خودکار 0؛)
http://jsfiddle.net/c1bgfffq/4/

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

هماهنگی با کمک حاشیه منفی بالا

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

لازم است بلوک خارجی موقعیت نسبی را مشخص کنید، و داخلی مطلق است. سپس لازم است که بلوک درونی را در نیمه ارتفاع بلوک خارجی بالا ببرید: 50٪ و نیمی از ارتفاع بالا حاشیه بالا را افزایش دهید: -H inner / 2.

بیرونی (موقعیت: نسبی؛) .NNER (ارتفاع: 100px؛ موقعیت: مطلق؛ بالا: 50٪؛ حاشیه بالا: -50px؛)
http://jsfiddle.net/c1bgfffq/13/

منهای این روش - ارتفاع واحد داخلی باید شناخته شود.

هماهنگی با تبدیل

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

بیرونی (موقعیت: نسبی؛) .NNER (موقعیت: مطلق؛ بالا: 50٪؛ تبدیل: ترجمه (-50٪)؛)
http://jsfiddle.net/c1bgfffq/9/

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

منفی این روش - اگر واحد داخلی موقعیت مطلق داشته باشد، نمی توان اعمال کرد.

هماهنگی با Flexbox

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

واحد خارجی نیاز به تنظیم صفحه نمایش: Flex و Margin: Auto. و این همه است! زیبا، آیا این نیست؟

بیرونی (صفحه نمایش: Flex؛ عرض: 200px؛ ارتفاع: 200px؛) .NNER (عرض: 100px؛ حاشیه: خودکار؛)
http://jsfiddle.net/c1bgfffq/14/

منهای این روش - FlexBox تنها توسط مرورگرهای مدرن پشتیبانی می شود.

راه انتخاب چیست؟

لازم است از تنظیم مشکل ادامه یابد:

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

برچسب ها: اضافه کردن برچسب ها

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

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

ساده ترین S. با استفاده از CSS بلوک هایی را که در آن ارتفاع پیش از آن شناخته شده است (برای هم ترازی عمودی) یا عرض (برای تراز افقی) را هماهنگ کنید.

تراز کردن با پوشش

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

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

.example-wrapper1 (سابقه و هدف: # 535E73؛ عرض: 200px؛ ارتفاع: 200px؛ padding: 20px 50px؛)

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

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

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

.example-wrapper2 (موقعیت: نسبی؛ ارتفاع: 250px؛ سابقه و هدف: URL (space.jpg)؛) .cat-king (عرض: 200px؛ ارتفاع: 200px؛ موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ پایین: 0؛ راست: 0؛ حاشیه: خودکار؛ زمینه: URL (king.png)؛)

هماهنگی افقی

تراز کردن توسط "Text-align: center"

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

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

.example Text (Text-Align: Center؛ Padding: 10px؛ سابقه و هدف: # FF90B8؛)

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

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

.example-wrapper3 (text-align: center؛ سابقه و هدف: # ff90b8؛). INLINLE-TEENT (صفحه نمایش: inline-block؛ عرض: 40٪؛ PADDING: 10px؛ text-align: left؛ سابقه و هدف: # ffe5e5؛)

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

عناصر بلوک با یک عرض شناخته شده به راحتی به صورت افقی هماهنگ شده اند، اگر شما نصب "حاشیه سمت چپ: خودکار؛ حاشیه حق: خودکار". معمولا یک ورودی اختصار استفاده می شود: " حاشیه: 0 خودکار"(به جای صفر، ممکن است معنی وجود داشته باشد). اما برای سطح عمودی، این روش مناسب نیست.

.lama-wrapper (ارتفاع: 200px؛ سابقه و هدف: # f1bf88؛) .lama1 (ارتفاع: 200px؛ عرض: 200px؛ سابقه و هدف: URL (lama.jpg)؛ حاشیه: 0 خودکار؛)

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

چیدمان عمودی

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

تراز بندی خط ارتفاع

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

.example-wrapper4 (خط ارتفاع: 100px؛ رنگ: # dc09c0؛ سابقه و هدف: # e5dae1؛ ارتفاع: 100px؛ text-align: center؛)

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

.example-wrapper5 (خط ارتفاع: 160px؛ ارتفاع: 160 پیکسل؛ اندازه فونت: 0؛ سابقه و هدف: # ff9b00؛) .example-wrapper5 .text1 (صفحه نمایش: inline-block؛ فونت اندازه: 14px؛ ارتفاع خط: 1.5؛ عمودی-align: middle؛ سابقه و هدف: # ffff2؛ رنگ: # ff9b00؛ text-align: center؛)

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

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

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

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

.one_product. mohng_wrapper (نمایش: جدول جدول؛ ارتفاع: 169 پیکسل؛ عمودی-align: middle؛ overfff: پنهان؛ سابقه و هدف: #fff؛ عرض: 255px؛) .one_product img (حداکثر ارتفاع: 169 پیکسل ٪؛ min-width: 140px؛ صفحه نمایش: بلوک؛ حاشیه: 0 خودکار؛)

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

هماهنگ کردن یک عنصر inline اضافی

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

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

.example-wrapper6 (ارتفاع: 300px؛ text-align: center؛ سابقه و هدف: # 70daf1؛) پرونده (صفحه نمایش: Inline-Block؛ عمودی align: middent؛ سابقه و هدف: URL (pudge.png)؛ رنگ پس زمینه: # FFF؛ عرض: 200px؛ ارتفاع: 200px؛) .riki (نمایش: inline-block؛ ارتفاع: 100٪؛ عمودی-align: middle؛)

نمایش: انعطاف پذیری و هماهنگی

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

تا کنون، به طوری که عملا من را ملاقات نکرد، اما هیچ محدودیتی برای او وجود ندارد.

.example-wrapper7 (صفحه نمایش: Flex؛ ارتفاع: 300 پیکسل؛ سابقه و هدف: # AEB96A؛) .example-wrapper7 IMG (حاشیه: خودکار؛)

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

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

متن سطح در مرکز

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

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

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

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

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

اگر شما نیاز به تنظیم هماهنگی DIV در مرکز، CSS می تواند زیبا ارائه دهد راه راحت: با استفاده از ضایعات خارجی حاشیه. هر دو عنصر بلوک و بلوک های لوکس را می توان تعریف کرد. مقدار PRIX باید مقادیر 0 (Denits Vertical) و خودکار (خودکار به صورت افقی) را مصرف کند:

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

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

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

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

.left (شناور: چپ؛)
.Right (شناور: راست)

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

.left (شناور: چپ؛)
.Right (شناور: راست)
پاورقی (روشن: هر دو)

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

چیدمان عمودی

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

هماهنگی در مرز بالا - .Child (عمودی-align: top)؛
تراز کردن در مرکز - .Child (عمودی-align: middle)؛
سطح پایین در مرز پایین - .child (عمودی-align: پایین)؛

نه ترجمه متن و نه عمر عمودی بر روی عناصر بلوک.

مشکلات احتمالی با بلوک های هماهنگ شده

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

. ثانیه (شناور: چپ)
.third (شناور: راست)
.clearfix (ارتفاع: 0؛ پاک کردن: هر دو؛)

شبه کلاس اغلب مورد استفاده قرار می گیرد: پس از آن، که همچنین به شما اجازه می دهد بلوک ها را به یک مکان بازگردانید با ایجاد یک pseudransport (در مثال DIV با کلاس کانتینر در داخل. اول و شامل i.Right):

.left (شناور: سمت چپ)
.Right (شناور: راست)
.Container: پس از (محتوا: "صفحه نمایش: جدول؛ پاک کردن: هر دو؛)

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

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

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

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

اما در ابتدای پایه:

سطح افقی با CSS

نام کلاس (
حاشیه: 0 خودکار؛
عرض: 200px؛
ارتفاع: 200px؛
}

برای هدایت DIV فقط به صورت افقی، شما باید عرض و مقدار اتوماتیک برای حاشیه چپ و راست را مشخص کنید (این یک فرم اختصاری نوشتن خواص CSS است). این روش بر روی عناصر بلوک (DIV، P، H1، و غیره) کار می کند. برای اعمال آن برای عناصر خطی (به عنوان مثال، لینک ها و تصاویر)، باید یک قانون دیگر را بنویسید - صفحه نمایش: بلوک.

هماهنگی به صورت افقی و عمودی CSS

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

نام کلاس (
عرض: 300 پیکسل؛
ارتفاع: 200px؛
موقعیت: مطلق؛
چپ: 50٪؛
بالا: 50٪؛
حاشیه: -100px 0 0 -150px؛
}

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

تراز کردن به صورت افقی و عمودی با استفاده از جی کوئری

همانطور که قبلا ذکر شد، روش CSS فوق تنها با اندازه ثابت DIV کار می کند. جی کوئری به نجات می آید:

// توابع اطلاعیه:
$ (پنجره) .Resize (تابع () (
$ ("نام کلاس"). CSS ((
موقعیت: "مطلق"،
چپ: ($ (پنجره) .width () - $ ("نام کلاس"). OUTERWIDTH ()) / 2،
بالا: ($ (پنجره) .height () - $ ("نام کلاس"). OuterHeight ()) / 2
});
});
// توابع تماس:
$ (پنجره) .Resize ()؛

این تابع عرض پنجره را در $ (پنجره) محاسبه می کند. هر بار هر بار که اندازه کاربر کاربر را تغییر می دهد، هر بار هر بار تغییر می کند. ما از OuterWidth () و OuterHeight () استفاده می کنیم، زیرا در مقایسه با عرض معمولی () و ارتفاع ()، آنها را اضافه می کنند و عرض مرزی را اضافه می کنند و اندازه را باز می گردانند. در نهایت، ما در هنگام تغییر اندازه پنجره و مرکز DIV در هنگام راه اندازی مجدد صفحه، سازگار هستیم.

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

این مقاله برخی از راه حل های آماده ارائه شده را ارائه می دهد که به کار ساده سازی کار بر روی عناصر به صورت افقی و (یا) به صورت عمودی کمک می کند.

توجه: تحت هر راه حل، لیستی از مرورگرها نشان دهنده نسخه هایی است که کد CSS مشخص شده را نشان می دهد.

CSS - تراز کردن بلوک در مرکز

1. هماهنگی یک بلوک در مرکز دیگر. در این مورد، بلوک اول و دوم دارای اندازه های پویا است.

...

والدین (موقعیت: نسبی؛) .CHILD: 50٪؛ بالا: 50٪؛ -Webkit-transform: ترجمه (-50٪، -50٪)؛ -moz-transform: ترجمه (-50٪، -50٪)؛ -ms-transforn: ترجمه (-50٪، -50٪)؛ -O-transform: ترجمه (-50٪، -50٪)؛ تبدیل: ترجمه (-50٪، -50٪)؛)

کروم 4.0+
فایرفاکس 3.6+
اینترنت اکسپلورر. 9+
اپرا 10.5+
Safari 3.1+

2. هماهنگی یک بلوک در مرکز دیگر. در این مورد، واحد دوم ابعاد ثابت دارد.

پدر و مادر (موقعیت: مطلق؛ چپ: 50٪؛ بالا: 50٪؛ / * عرض و ارتفاع 2 بلوک * / عرض: 500 پیکسل؛ ارتفاع: 250 پیکسل؛ / * مقادیر بسته به اندازه آن * / * حاشیه سمت چپ آن تعیین می شود \u003d - عرض / 2 * / حاشیه سمت چپ: -250px؛ / * margin-top \u003d - height / 2 * / margin-top: -125 پیکسل؛)