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

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

1. تراز با جدول

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

HTML

css

بیرونی (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ تراز متن: مرکز؛ تراز عمودی: وسط؛ رنگ پس‌زمینه: #ffc؛ )

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

اولین منفی را می توان با جایگزینی تگ های جدول با div و تنظیم حالت نمایش جدول در CSS تا حدی واگرد کرد.

HTML

css

Outer-wrapper (نمایشگر: جدول؛ ) .outer (نمایش: جدول-سلول;)

2. تراز با بالشتک

به شرطی که ارتفاع بلوک های داخلی و خارجی را بدانیم، تراز را می توان با استفاده از فرورفتگی های عمودی بلوک داخلی، با استفاده از فرمول: (H بیرونی - H داخلی) / 2 تنظیم کرد.

css

بیرونی ( ارتفاع : 200 پیکسل ؛ ) داخلی ( ارتفاع : 100 پیکسل ؛ حاشیه : 50 پیکسل 0 ؛ )

نقطه ضعف راه حل، دانستن اجباری ارتفاع هر دو بلوک است.

3. تراز با خط ارتفاع

اگر بلوک داخلی بیش از یک خط متن را اشغال نمی کند، می توانید از ویژگی line-height استفاده کنید و آن را برابر با ارتفاع بلوک بیرونی قرار دهید. از آنجایی که محتوای بلوک داخلی نباید به خط دوم برود، ایده خوبی است که فضای سفید: nowrap و overflow: قوانین پنهان را نیز اضافه کنید.

css

بیرونی ( ارتفاع : 200 پیکسل ؛ ارتفاع خط : 200 پیکسل ؛ ) .داخلی ( فضای سفید : nowrap ؛ سرریز : پنهان ؛ )

از این روش می توان برای تراز کردن نیز استفاده کرد متن چند خطی. برای انجام این کار، بلوک داخلی باید مقدار line-height را نادیده بگیرد و همچنین نمایش قوانین را اضافه کند: inline-block و vertical-align: middle .

css

بیرونی (ارتفاع: 200 پیکسل؛ ارتفاع خط: 200 پیکسل؛ ) .داخلی (ارتفاع خط: عادی؛ نمایشگر: بلوک درون خطی؛ تراز عمودی: وسط؛ )

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

4. تراز کردن با "کشش"

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

بکار گرفتن این روشنیاز داریم:

• بلوک بیرونی را روی موقعیت: نسبی و بلوک داخلی را روی موقعیت مطلق قرار دهید: مطلق ;
• چند قانون بالا: 0 و پایین: 0 را به بلوک داخلی اضافه کنید، در نتیجه به کل ارتفاع بلوک بیرونی کشیده می شود.
• بالشتک عمودی بلوک داخلی را روی خودکار تنظیم کنید.

css

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

5. تراز با حاشیه منفی بالا

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

شما باید بلوک بیرونی را روی موقعیت نسبی و بلوک داخلی را روی موقعیت مطلق تنظیم کنید. سپس جعبه داخلی را به نصف ارتفاع بالای جعبه بیرونی: 50% به پایین ببرید و آن را تا نصف ارتفاع حاشیه بالای جعبه به سمت بالا ببرید: -H _درونی / 2 .

css

بیرونی (موقعیت: نسبی؛) .داخلی (ارتفاع: 100 پیکسل؛ موقعیت: مطلق؛ بالا: 50%؛ حاشیه بالا: -50 پیکسل؛ )

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

6. تراز با تبدیل

این روش زمانی قابل استفاده است که ارتفاع یونیت داخلی مشخص نباشد. باید کادر داخلی را به نصف ارتفاع جعبه بیرونی پایین ببرید: 50٪، سپس از ویژگی transform استفاده کنید و آن را با تابع translateY(-50%) به بالا ببرید.

css

بیرونی ( موقعیت : نسبی ؛ ) .درونی ( موقعیت : مطلق ؛ بالا : 50 % ؛ تبدیل : translateY (-50 % )؛ )

7. تراز با شبه عنصر

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

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

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

css

بیرونی: قبل (نمایش: بلوک درون خطی؛ ارتفاع: 100%؛ تراز عمودی: وسط؛ محتوا: ""؛ ) .inner (نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ )

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

8. تراز با Flexbox

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

css،

HTML

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

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

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

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

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

دو عنصر div وجود دارد که یکی در دیگری تودرتو است. بیایید کلاس های مناسب - بیرونی و درونی - را به آنها بدهیم.

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

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

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

بیایید اندازه بلوک‌ها و همچنین رنگ‌های پس‌زمینه را برای دیدن حاشیه‌های آنها تنظیم کنیم.

بیرونی (عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ تراز نوشتاری: مرکز؛ تراز عمودی: وسط؛ رنگ پس‌زمینه: #ffc؛ ) .داخلی (نمایش: بلوک درون خطی؛ عرض: 100 پیکسل؛ ارتفاع: 100 پیکسل؛ رنگ پس‌زمینه : #fcc;)
پس از اعمال سبک ها، می بینیم که بلوک داخلی به صورت افقی تراز شده است، اما نه عمودی:
http://jsfiddle.net/c1bgfffq/

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

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

تراز با جدول

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

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

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

اولین منفی را می توان با جایگزینی تگ های جدول و td با div و تنظیم حالت نمایش جدول در CSS تا حدی حذف کرد.

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

تراز با بالشتک

اگر ارتفاع بلوک داخلی و خارجی مشخص باشد، می توان با استفاده از لایه بندی عمودی بلوک داخلی، تراز را با استفاده از فرمول: (H بیرونی - H داخلی) / 2 تنظیم کرد.

بیرونی ( ارتفاع: 200 پیکسل؛ ) داخلی ( ارتفاع: 100 پیکسل؛ حاشیه: 50 پیکسل 0؛ )
http://jsfiddle.net/c1bgfffq/6/

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

تراز با ارتفاع خط

اگر می دانید که بلوک داخلی نباید بیش از یک خط متن را اشغال کند، می توانید از ویژگی line-height استفاده کنید و آن را برابر با ارتفاع بلوک بیرونی قرار دهید. از آنجایی که محتوای بلوک داخلی نباید به خط دوم بپیچد، توصیه می‌شود که فضای سفید: nowrap و overflow: قوانین پنهان را نیز اضافه کنید.

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

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

بیرونی (ارتفاع: 200 پیکسل؛ ارتفاع خط: 200 پیکسل؛ ) .داخلی (ارتفاع خط: عادی؛ نمایشگر: بلوک درون خطی؛ تراز عمودی: وسط؛ )
http://jsfiddle.net/c1bgfffq/15/

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

تراز کششی

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

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

1. موقعیت نسبی را به بلوک بیرونی و موقعیت مطلق را به بلوک داخلی تنظیم کنید.
2. قوانین بالا: 0 و پایین: 0 را به بلوک داخلی اضافه کنید، در نتیجه به کل ارتفاع بلوک بیرونی کشیده می شود.
3. مقدار را برای لایه عمودی بلوک داخلی روی auto تنظیم کنید.

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

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

تراز با حاشیه منفی بالا

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

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

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

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

تراز با تبدیل

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

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

چرا در روش قبلی تعیین مقدار به صورت درصد غیرممکن بود؟ از آنجایی که مقادیر درصدی ویژگی margin نسبت به محاسبه می شود عنصر والد، مقدار 50% نصف ارتفاع جعبه بیرونی خواهد بود و باید جعبه داخلی را نصف ارتفاع خودش افزایش دهیم. این دقیقاً همان چیزی است که خاصیت transform برای آن است.

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

تراز با Flexbox

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

بلوک بیرونی باید روی نمایش: flex و بلوک داخلی باید روی حاشیه: auto تنظیم شود. و این همه است! زیباست، نه؟

بیرونی (نمایشگر: انعطاف پذیر؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .داخلی (عرض: 100 پیکسل؛ حاشیه: خودکار؛ )
http://jsfiddle.net/c1bgfffq/14/

عیب این روش این است که Flexbox فقط توسط مرورگرهای مدرن پشتیبانی می شود.

کدام راه را انتخاب کنیم؟

لازم است از بیان مشکل پیش برویم:

• برای تراز عمودی متن، بهتر است از padding عمودی یا ویژگی line-height استفاده کنید.
• برای عناصر کاملاً قرار گرفته با ارتفاع مشخص (مثلاً نمادها) ایده آل است راه مناسببا یک ویژگی حاشیه منفی.
• برای موارد پیچیده تر که ارتفاع بلوک ناشناخته است، باید از یک شبه عنصر یا ویژگی تبدیل استفاده شود.
• خوب، اگر به اندازه کافی خوش شانس هستید که نیازی به پشتیبانی از نسخه های قدیمی IE ندارید، مطمئناً Flexbox بهتر است.

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

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

به عنوان مثال، قطعه زیر را در نظر بگیرید:

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

راه حل مشکل

مرورگرهای "مناسب" (از جمله MSIE

اکثریت مرورگرهای مدرنپشتیبانی از CSS2.1، یعنی مقدار سلول جدول برای ویژگی نمایش. این به ما این توانایی را می دهد که بلوک متنی را مجبور کنیم به عنوان سلول جدول نمایش داده شود و با استفاده از آن، متن را به صورت عمودی تراز کنیم:

div (
نمایش: جدول-سلول;
vertical-align: وسط;
}

div (
نمایش: جدول-سلول;
vertical-align: bottom;
}

اینترنت اکسپلورر (حداکثر نسخه 7)

برای حل مشکل تراز کردن متن در پایین یک بلوک در MSIE، می‌توانید از موقعیت‌یابی مطلق استفاده کنید (در اینجا به یک عنصر درون خطی تودرتو در یک بلوک نیاز داریم):

div (
موقعیت: نسبی;
}
فاصله div(
display:block;
موقعیت: مطلق;
پایین: 0%;
سمت چپ: 0%
عرض: 100%
}

این مجموعه قوانین در مرورگرهای "درست" نیز کار می کند.

خواص را مشخص کنید

فاصله div (
display:block;
عرض: 100%
}

لازم نیست، اما اگر قصد دارید از تراز افقی متن علاوه بر تراز عمودی متن استفاده کنید، به عنوان مثال، تراز متن: مرکز ;، ممکن است به آنها نیاز باشد.

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

مواد مورد مطالعه:

• مرکزگذاری عمودی در CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• مرکز عمودی با استفاده از CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• تراز عمودی (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• روش دیگری برای تراز عمودی در CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

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

در زیر تکنیک‌های تراز عمودی محبوب در میان طراحان چیدمان آورده شده است. این نشان می دهد که آنها چگونه کار می کنند و هر کدام از آنها برای کدام موارد مناسب تر هستند.

در اینجا دو عنصر div وجود دارد:

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

ارتفاع خط برای یک خط

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

شما نمی توانید از line-height=100% به عنوان درصد استفاده کنید، زیرا 100% در این حالت ارتفاع فونت است.

ظرف(
ارتفاع: 300 پیکسل؛
ارتفاع خط: 300 پیکسل
}

درونی(
فضای سفید: nowrap;
سرریز: پنهان;
}

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

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

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

پایه - به طور پیش فرض؛
. پایین - محتوا در پایین سلول؛
. وسط - محتوا در وسط سلول؛
. بالا - محتوا در بالای سلول.

در مثال اول، یک سلول جدول تنها به بلوک بیرونی تبدیل می شود.

ظرف(
نمایش: جدول-سلول;
vertical-align: وسط;
}

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

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

لفاف بیرونی (
نمایش: جدول;
}

ظرف(
نمایش: جدول-سلول;
vertical-align: وسط;
}

موقعیت: مطلق + حاشیه منفی

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

مقدار بالای ویژگی 50٪ باعث می شود که عنصر تودرتو در بالاترین میزان در وسط جعبه بیرونی قرار گیرد. باقی مانده است که آن را با یک حاشیه منفی به اندازه نصف ارتفاع خودش بالا بیاوریم تا دقیقاً در مرکز عمودی بایستد.

ظرف(
موقعیت: نسبی;
}

درونی(
ارتفاع: 140px;
موقعیت: مطلق;
بالا: 50%;
margin-top: -70px;
}

عیب این روش نیاز به دانستن قد کودک است.

تراز درون خطی با عمودی-تراز

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

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

برای بلوک بیرونی، وسط یک خط تجویز می شود.

ظرف(
ارتفاع: 140px;
ارتفاع خط: 140 پیکسل؛
}

مقدار ارتفاع خط برای بلوک داخلی به مقدار عادی یا هر مقداری که می‌خواهید لغو می‌شود. همچنین به او تراز vertical-align: وسط و تبدیل به inline-block نوع - display: inline-block داده می شود.

درونی(
صفحه نمایش: بلوک درون خطی
ارتفاع خط: معمولی
vertical-align: وسط;
}

عیب این روش این است که باید قد والدین را بدانید.

تراز با تبدیل

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

ویژگی top با مقدار 50% جعبه داخلی را پایین می آورد تا لبه بالایی آن در وسط والد قرار گیرد. مقدار translateY: -50٪ عنصر را تا نصف ارتفاع خودش افزایش می دهد و بنابراین مراکز عمودی جعبه ها را تراز می کند.

ظرف(
موقعیت: نسبی;
}

درونی(
موقعیت: مطلق;
بالا: 50%;
تبدیل: translateY(-50%);
}

نقطه ضعف پذیرش پشتیبانی محدود از توابع تبدیل توسط مرورگر IE است.

تراز از طریق شبه عنصر

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

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

ظرف: قبل از (
محتوا: ""؛
ارتفاع: 100%;
vertical-align: وسط;
صفحه نمایش: بلوک درون خطی
}

درونی(
صفحه نمایش: بلوک درون خطی
vertical-align: وسط;
}

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

فلکس باکس

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

ظرف(
نمایش: فلکس;
عرض: 320 پیکسل
ارتفاع: 140px;
}

درونی(
عرض: 120 پیکسل
حاشیه: خودکار;
}

Flexbox فقط در مرورگرهای مدرن کار می کند.

انتخاب روش

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

ارتفاع عناصر ناشناخته است

در این شرایط، می توانید از یکی از چهار روش جهانی استفاده کنید:

1. جدول. والد یک سلول جدول است که در HTML یا از طریق display-table/display-cell ایجاد شده است. این عنصر والد به صورت vertical-align: وسط داده می شود.

2. شبه عنصر. برای بلوک بیرونی، یک شبه المان بلوک درون خطی با عرض=100% و تراز عمودی: وسط ایجاد می شود. صفحه نمایش به کودک داده می شود: بلوک درون خطی و تراز عمودی: وسط. این روش تنها زمانی کار نمی کند که به بلوک داخلی موقعیت مطلق داده شود.

3. تبدیل. والد مقام می گیرد: نسبی. موقعیت به کودک داده می شود: مطلق، بالا: 50% و تبدیل: translateY(-50%).

4 فلکس باکس. بلوک بیرونی برای نمایش: فلکس، بلوک داخلی روی حاشیه: خودکار تنظیم شده است.

فقط قد کودک مشخص است

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

یک خط در هر بلوک با ارتفاع مشخص

کادر بیرونی به ویژگی line-height با مقداری برابر با ارتفاع آن تنظیم می شود.

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

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

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

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

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

روش اول با ارتفاع خط

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

css

Constutesim_first(
حاشیه: 2px جامد #bf1515;
ارتفاع: 175 پیکسل;
}
.constutesim_first > p(
line-height: 175px;
حاشیه: 0;
text-align:center;
بالشتک: 0;
اندازه فونت: 17px;
رنگ: #3152a0;
font-family: Tahoma;
فونت-وزن: پررنگ;
}

همچنین، بلافاصله می توانید ببینید که همه چیز در واقعیت چگونه به نظر می رسد.

به همین ترتیب، می توان نحوه تنظیم تصویر را که در مرکز و بدون قید و شرط عمودی خواهد بود، پیاده سازی کرد. در اینجا فقط برای ثبت یک ویژگی vertical-align باقی می ماند: middle; که وظیفه نمایش تصویر را بر عهده دارد.

css

تغییر دوم(
حاشیه: 2px قرمز جامد.
خط ارتفاع: 158 پیکسل.
}

تغییر دوم div(
text-align:center;
}
.scond-variation img(
vertical-align: وسط;
حاشیه: 0px جامد #3a3838;
}

ما عکس های فوری تصویر را در مرکز و به صورت عمودی پیاده سازی می کنیم.

تراز با ویژگی موقعیت

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

css

Competaird-Option (
حاشیه: 2px جامد #d40e0e;
ارتفاع: 162px;
موقعیت: نسبی;
}
.competaird-option div (
موقعیت: مطلق;
بالا: 50%;
سمت چپ: 50%
قد: 28%;
عرض: 49%
حاشیه: -2% 0 0 -25%;
حاشیه: 2px جامد #4a4848;
}

فاصله خطوط یا ارتفاع خط، ارتفاع عمودی بین خطوط متن ارائه شده است صفحه HTML. تقریباً همیشه، این مقدار فاصله توسط مرورگر یا موتور رندر بر روی مقدار مناسب تنظیم می شود. این مقدار معمولاً به فونت صفحه نمایش داده شده و سایر عوامل بستگی دارد.

تراز کردن با ویژگی جدول

در این روش از روش اثبات شده و روش قدیمی، که در آن عناصر را به جدولی که سلول ها در آن قرار دارند دوباره می سازیم. در مورد برچسبی که جدول نامیده می شود، در اینجا استفاده نخواهد شد، در اینجا کاملاً متفاوت تنظیم خواهیم کرد ویژگی css، نمایشگر است: جدول؛، نمایش: جدول-سلول؛. اگر در مورد قدیمی ترین نسخه های IE صحبت کنیم، داده ها به سادگی در اینجا نمایش داده نمی شوند. امیدوارم مرورگر خود را به‌روزرسانی کرده باشید، زیرا دیگر مرتبط نیست و تقریباً همه چیز به درستی نمایش داده نمی‌شود.

Cherevert-variation (
حاشیه: 2px جامد #c30b0b;
ارتفاع: 173 پیکسل;
نمایش: جدول;
عرض: 100%
اندازه فونت: 17px;
فونت-وزن: پررنگ;
رنگ: #3945a0;
}

Cherevert-variation div(
نمایش: جدول-سلول;
vertical-align: وسط;
text-align:center;
}

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

تراز با خاصیت flex

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

css

متغیر- افقی (
حاشیه: 2px جامد #d20c0c;
ارتفاع: 147 پیکسل;
نمایش: فلکس;
align-اقلام: مرکز;
justify-content: center;
اندازه فونت: 18px;
فونت-وزن: پررنگ;
رنگ: #49518c;
}

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

تراز کردن با خاصیت transform

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

css

عمودی-medilpasudsa (
حاشیه: 2px جامد #e00a0a;
ارتفاع: 158 پیکسل;
اندازه فونت: 19px;
فونت-وزن: پررنگ;
رنگ: #353c71;
}
.vertical-medilpasudsa > div(
موقعیت: نسبی;
بالا: 50%;
تبدیل: translateY(-50%);
text-align:center;
}

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

اگر می خواهید کاراکترها را به صورت افقی در یک عنصر قرار دهید، باید از text-align: center استفاده کنید. یکی از گزینه ها، اگر می خواهید آن را به صورت عمودی در مرکز قرار دهید و یک فوتر هدر ثابت و یک ردیف متن دارید، ارتفاع خط را با ارتفاع فوتر خود تنظیم کنید.

اگر می‌خواهید متن را در مرکز یک عنصر مانند div، هدر یا پاراگراف قرار دهید، می‌توانید از آن استفاده کنید ویژگی text-align CSS.

Text-align چندین ویژگی معتبر دارد:

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

از این ویژگی ها برای تراز کردن متن در یک div والد یا wrapper استفاده کنید. اگر می خواهید متن را به صورت افقی در یک عنصر در مرکز قرار دهید، باید از text-align: center استفاده کنید.

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