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

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٪؛ )

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

در زیر راه های اصلی برای حل مشکل، مزایا و معایب آنها آورده شده است. برای درک اصل مثال ها، توصیه می کنم ارتفاع / عرض پنجره 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 مسدود کردناین سبک ها را با موارد زیر لغو کنید - فضای سفید: عادی. AT این مثالاندازه فونت: 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. گاهی اوقات برای جبران از دست دادن 50% عرض به دلیل استفاده از cssویژگی چپ را می توان با قانون تنظیم شده برای بلوک کمک کرد: margin-right: -50%; .

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

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

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

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

جایزه

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

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

ولاد مرژویچ

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

مرکز عمودی

یکی از راه‌های نشان دادن تمرکز و عنوان سایت به بازدیدکننده، استفاده از یک صفحه splash است. این اولین صفحه ای است که به طور معمول در آن یک مقدمه فلش یا تصویری وجود دارد که ایده اصلی سایت را بیان می کند. این تصویر همچنین پیوندی به بخش های دیگر سایت است. بدون در نظر گرفتن وضوح مانیتور، باید این تصویر را در مرکز پنجره مرورگر قرار دهید. برای این منظور می توانید از جدولی با عرض و ارتفاع معادل 100% استفاده کنید (مثال 1).

مثال 1: وسط یک تصویر

هم ترازی

در این مثال، تراز افقی با استفاده از پارامتر تگ align="center" تنظیم شده است ، و محتویات سلول نیازی به مرکز عمودی ندارند، زیرا این موقعیت به طور پیش فرض تنظیم شده است.

برای تنظیم ارتفاع میز روی 100% حذف کنید، کد دیگر معتبر نیست.

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

تراز افقی

با ترکیب ویژگی‌های align (تراز افقی) و valign ( چیدمان عمودی) برچسب ، تنظیم چندین نوع موقعیت عناصر نسبت به یکدیگر جایز است. روی انجیر 1 نحوه تراز کردن عناصر را به صورت افقی نشان می دهد.

بیایید به چند نمونه از ترازبندی متن مطابق شکل زیر نگاه کنیم.

تراز بالا

برای تعیین تراز محتویات سلول به بالا، برای برچسب لازم است ویژگی valign را با مقدار top تنظیم کنید (مثال 2).

مثال 2: استفاده از valign

هم ترازی

ستون 1 ستون 2

در این مثال، ویژگی های سلول با استفاده از پارامترهای برچسب کنترل می شوند ، اما تغییر از طریق سبک ها نیز راحت تر است. به طور خاص، تراز سلولی با ویژگی های vertical-align و text-align مشخص می شود (مثال 3).

مثال 3: اعمال سبک ها برای تراز

هم ترازی

ستون 1 ستون 2

برای کوتاه کردن کد، این مثال از گروه‌بندی انتخابگر استفاده می‌کند زیرا ویژگی‌های vertical-align و padding به طور همزمان روی دو سلول اعمال می‌شوند.

تراز پایین به همین ترتیب انجام می شود، اما از پایین به جای بالا استفاده می شود.

تراز وسط

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

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

مثال 4: تراز فرمول

هم ترازی

(18.6)

در این مثال، اولین خانه جدول خالی است، فقط برای ایجاد یک تورفتگی عمل می کند، که اتفاقاً با استفاده از سبک ها نیز می توان آن را تنظیم کرد.

تراز کردن عناصر فرم

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

برای اینکه متن نزدیک فیلدهای فرم به صورت راست تراز شوند و خود عناصر فرم به سمت چپ تراز شوند، به جدولی با حاشیه نامرئی و دو ستون نیاز دارید. ستون سمت چپ شامل خود متن و ستون سمت راست شامل فیلدهای متنی خواهد بود (مثال 5).

مثال 5 تراز کردن فیلدهای فرم

هم ترازی

نام
پست الکترونیک
اظهار نظر

در این مثال، ویژگی align="right" برای سلول هایی که نیاز به تراز درست دارند اضافه شده است. برای اینکه برچسب "Comment" در حاشیه بالای متن چند خطی قرار گیرد، سلول مربوطه با استفاده از ویژگی valign روی تراز بالا تنظیم می شود.

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

در زیر راه های اصلی برای حل مشکل، مزایا و معایب آنها آورده شده است. برای درک اصل مثال ها، توصیه می کنم ارتفاع / عرض پنجره 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. گاهی اوقات برای جبران از دست دادن 50% عرض به دلیل استفاده شود. ویژگی های cssچپ می تواند به تنظیم قانون در بلوک کمک کند: margin-right: -50%; .

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

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

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

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

جایزه

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

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

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

هم ترازی مرکز عمودی با CSS چندان آسان نیست. راه های زیادی وجود دارد و همه در همه مرورگرها کار نمی کنند. بیایید به 5 نگاه کنیم روش های مختلفو همچنین "برای" و "علیه" هر یک از آنها. مثال.

راه 1

این روش فرض می کند که ما در حال تنظیم برخی از عناصر هستیم

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

مقداری اطلاعات مفید، که باید در مرکز قرار گیرد.
#wrapper( نمایش: جدول؛ ) #سلول (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

طرفداران

  • محتوا می تواند به صورت پویا ارتفاع را تغییر دهد (ارتفاع در CSS تعریف نشده است).
  • اگر فضای کافی برای محتوا وجود نداشته باشد، کوتاه نمی شود.

موارد منفی

  • در IE 7 و پایین تر کار نمی کند
  • تعداد زیادی تگ تو در تو

روش دوم

این روش از موقعیت‌یابی مطلق div استفاده می‌کند که بالای آن روی 50% و حاشیه بالایی آن (حاشیه-بالا) منهای نیمی از ارتفاع محتوا تنظیم شده است. این بدان معناست که شی باید دارای یک ارتفاع ثابت باشد که در سبک های CSS تعریف شده است.

از آنجایی که ارتفاع ثابت است، می توانید overflow:auto; برای div حاوی محتوا، بنابراین اگر محتوا مناسب نباشد، نوارهای پیمایش ظاهر می شوند.

محتوا در اینجا
#محتوا ( موقعیت: مطلق؛ بالا: 50%؛ ارتفاع: 240 پیکسل؛ حاشیه بالا: -120 پیکسل؛ /* منهای نیمی از ارتفاع */ )

طرفداران

  • در همه مرورگرها کار می کند.
  • بدون سرمایه گذاری اضافی

موارد منفی

  • وقتی فضای کافی وجود نداشته باشد، محتوا ناپدید می شود (به عنوان مثال، div داخل بدنه است و کاربر پنجره ها را کوچک می کند، در این صورت نوارهای پیمایش ظاهر نمی شوند.

روش سوم

در این روش محتوای div را با یک div دیگر می پیچیم. ارتفاع آن را روی 50% (ارتفاع: 50%؛) و حاشیه پایین آن را به نصف ارتفاع آن تنظیم کنید (margin-bottom:-contentheight;). محتوا شناور را پاک می کند و در مرکز قرار می گیرد.

در اینجا مطالب
#floater( شناور: سمت چپ؛ ارتفاع: 50%؛ حاشیه پایین: -120 پیکسل؛ ) #content( واضح: هر دو؛ ارتفاع: 240 پیکسل؛ موقعیت: نسبی؛ )

طرفداران

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

موارد منفی

  • من فکر می کنم فقط یک: اینکه یک عنصر خالی اضافی استفاده می شود.

روش چهارم

این روش از موقعیت: خاصیت مطلق استفاده می کند. برای div هایی با ابعاد ثابت (عرض و ارتفاع). سپس مختصات آن را top قرار می دهیم:0; bottom:0; ، اما از آنجایی که ارتفاع ثابتی دارد، نمی تواند کشیده شود و در مرکز قرار دارد. این بسیار شبیه به روش شناخته شده است تراز افقیبر روی یک عنصر بلوک با عرض ثابت متمرکز شده است (حاشیه: 0 خودکار؛).

اطلاعات مهم.
#content( موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ چپ: 0؛ راست: 0؛ حاشیه: خودکار؛ ارتفاع: 240 پیکسل؛ عرض: 70 درصد؛ )

طرفداران

  • بسیار ساده.

موارد منفی

  • در کار نمی کند اینترنت اکسپلورر
  • اگر فضای کافی در ظرف نباشد، محتوا بدون نوارهای پیمایش بریده می شود.

روش پنجم

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

چند خط متن
#content( ارتفاع: 100 پیکسل؛ ارتفاع خط: 100 پیکسل؛ )

طرفداران

  • در همه مرورگرها کار می کند.
  • اگر متن مناسب نباشد، متن را قطع نمی کند.

موارد منفی

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

این روش برای عناصر کوچک مانند قرار دادن متن در یک دکمه یا جعبه متن بسیار مفید است.

اکنون که می دانید چگونه می توانید به تراز عمودی مرکز دست یابید، بیایید یک وب سایت ساده بسازیم که در نهایت به شکل زیر خواهد بود:

مرحله 1

همیشه خوب است که با نشانه گذاری معنایی شروع کنید. ساختار صفحه ما به این صورت خواهد بود:

  • #floater (برای مرکز محتوا)
  • #مرکز (عنصر مرکزی)
    • #سمت
      • #لوگو
      • #nav (فهرست
      • #محتوا
    • #پایین (برای کپی رایت و همه)

    بیایید نشانه گذاری html زیر را بنویسیم:

    یک شرکت متمرکز

    عنوان صفحه

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

    سرفصل 2

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

    اعلامیه حق چاپ به اینجا می رسد

    گام 2

    حالا می نویسیم CSS ساده، برای قرار دادن عناصر در صفحه. شما باید این کد را در فایل style.css ذخیره کنید. روی آن است که لینک در فایل html نوشته شده است.

    Html، بدنه (حاشیه: 0؛ بالشتک: 0؛ ارتفاع: 100%؛ ) بدنه (پس‌زمینه: url("page_bg.jpg") 50% 50% بدون تکرار #FC3؛ خانواده فونت: Georgia، Times، serifs. ) #floater ( موقعیت: نسبی؛ شناور: چپ؛ ارتفاع: 50%؛ حاشیه پایین: -200 پیکسل؛ عرض: 1 پیکسل؛ ) #مرکز (موقعیت: نسبی؛ واضح: چپ؛ ارتفاع: 400 پیکسل؛ عرض: 80 درصد؛ حداکثر -width: 800px؛ حداقل عرض: 400px؛ حاشیه: 0 خودکار؛ پس‌زمینه: #fff؛ حاشیه: 4px جامد #666؛ ) #پایین (موقعیت: مطلق؛ پایین: 0؛ سمت راست: 0؛ ) #nav ( موقعیت: مطلق؛ چپ: 0؛ بالا: 0؛ پایین: 0؛ راست: 70 درصد؛ بالشتک: 20 پیکسل؛ حاشیه: 10 پیکسل؛ ) #content ( موقعیت: مطلق؛ چپ: 30 درصد؛ راست: 0؛ بالا: 0؛ پایین: 0؛ سرریز: خودکار؛ ارتفاع: 340 پیکسل؛ بالشتک: 20 پیکسل؛ حاشیه: 10 پیکسل؛ )

    قبل از اینکه بتوانیم محتوای خود را تراز وسط قرار دهیم، باید ارتفاع بدنه و html را روی 100% تنظیم کنیم. از آنجایی که ارتفاع بدون padding داخلی و خارجی (padding و margin) در نظر گرفته می شود، آنها را (padding) روی 0 قرار می دهیم تا اسکرول بار وجود نداشته باشد.

    بالشتک پایین برای عنصر "floater" منهای نیمی از ارتفاع محتوا (400px)، یعنی -200px است.

    صفحه شما اکنون باید چیزی شبیه به این باشد:

    عرض عنصر #مرکز 80 درصد است. این باعث می شود سایت ما در صفحه نمایش های کوچک باریک تر و در صفحه های بزرگتر گسترده تر شود. اکثر سایت‌ها در مانیتورهای عریض جدید در گوشه سمت چپ بالا زشت به نظر می‌رسند. ویژگی‌های min-width و max-width نیز صفحه ما را محدود می‌کنند تا خیلی پهن یا خیلی باریک به نظر نرسد. اینترنت اکسپلورر از این ویژگی ها پشتیبانی نمی کند. باید روی یک عرض ثابت تنظیم شود.

    از آنجایی که عنصر #centered روی position:relative تنظیم شده است، می‌توانیم از موقعیت مطلق عناصر درون آن استفاده کنیم. سپس سرریز را تنظیم کنید: auto; برای عنصر #content به طوری که اگر محتوای مناسبی وجود نداشته باشد، نوارهای پیمایش ظاهر شوند.

    مرحله 3

    و آخرین کاری که ما انجام خواهیم داد این است که یک ظاهر طراحی را اضافه کنیم تا صفحه کمی جذاب تر به نظر برسد. بیایید با منو شروع کنیم.

    #nav ul ( style-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; رنگ پس‌زمینه: #e8e8e8؛ بالشتک: 7 پیکسل؛ حاشیه: 0؛ نوشتار تزئینی: هیچ؛ رنگ: #000؛ حاشیه پایین: 1 پیکسل ثابت #bbb؛ تراز متن: راست؛ ) #nav li a::after ( محتوا: """؛ رنگ: #aaa؛ وزن قلم: پررنگ؛ نمایشگر: درون خطی؛ شناور: سمت راست؛ حاشیه: 0 2px 0 5px؛ ) #nav li a:hover، #nav li a:focus ( پس زمینه: # f8f8f8; حاشیه-پایین-رنگ: #777; ) #nav li a:hover::after ( حاشیه: 0 0 0 7px؛ رنگ: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )

    اولین کاری که برای بهتر جلوه دادن منو انجام دادیم حذف گلوله ها با تنظیم ویژگی list-style:none و همچنین تنظیم padding و padding بود، زیرا پیش فرض ها بین مرورگرها بسیار متفاوت است.

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

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

    مرحله 4

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

    #مرکز ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- serif؛ وزن فونت: معمولی؛ رنگ: #666؛ ) h1 (رنگ: #f93؛ حاشیه پایین: 1px جامد #ddd؛ فاصله حروف: -0.05em؛ وزن قلم: پررنگ؛ حاشیه بالا: 0. padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo (اندازه قلم: 2em؛ تراز متن: مرکز؛ رنگ: #999؛ ) #نشانه قوی (وزن قلم: معمولی؛ ) #طول آرم (نمایش: بلوک؛ اندازه قلم: 4em؛ ارتفاع خط: 0.7em؛ رنگ: #666؛ ) p، h2، h3 (ارتفاع خط: 1.6em؛ ) a (رنگ: #f03؛ )

    در این استایل ها گوشه های گرد را برای عنصر #مرکز قرار می دهیم. در CSS3، این مسئول خواهد بود دارایی شعاع مرزی. این هنوز توسط برخی از مرورگرها اجرا نشده است، مگر اینکه از پیشوندهای -moz و -webkit برای موزیلا فایرفاکسو Safari/Webkit.

    سازگاری

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

    • عنصر #floater باید روی عرض تنظیم شود
    • بالشتک اضافی در اطراف منوها در IE 6

    237152 بازدید