تراز افقی و عمودی عناصر. تراز عمودی در div

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

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

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

div(
حاشیه: 1px جامد #000;
ارتفاع: 10em;
عرض: 10em;
}


مقداری متن

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

حل مشکل مرورگرهای "صحیح" (از جمله MSIE

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

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

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

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

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

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

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

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

دامنه دیو (
نمایش: بلوک؛
عرض: 100%؛
}

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

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

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

• مرکزگذاری عمودی در 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)

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

حاشیه تراز افقی: خودکار

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

عنصر ( حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛ عرض: 50٪؛ )

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

text-align: مرکز

این روش برای قرار دادن متن در یک بلوک مناسب است. text-align: center:

تراز با text-align .wrapper ( text-align: center; )

من تراز وسط هستم

موقعیت و حاشیه منفی باقی مانده است

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

تراز کردن با موقعیت .wrapper ( موقعیت: نسبی؛ ) .wrapper p ( سمت چپ: 50%؛ حاشیه: 0 0 0 -100px؛ موقعیت: مطلق؛ عرض: 200px؛ )

من تراز وسط هستم

نمایش: inline-block + text-align: center

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

تراز با نمایشگر: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li (نمایش: inline-block;)

• خانه
• درباره نویسنده

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

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

line-height .wrapper ( ارتفاع: 100 پیکسل؛ ارتفاع خط: 100 پیکسل؛ )

من به صورت عمودی تراز شده ام

موقعیت و حاشیه منفی افزایش می یابد

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

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

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

نمایش: سلول جدول

برای تراز عمودی، ویژگی display: table-cell به عنصر اعمال می شود که آن را مجبور می کند یک سلول جدول را شبیه سازی کند. ارتفاع و تراز عمودی آن را نیز تنظیم می کنیم: وسط. بیایید همه اینها را در یک ظرف با dislpay بپیچیم: جدول؛ ملک. :

نمایشگر تراز عمودی: جدول-سلول .wrapper (نمایش: جدول؛ عرض: 100%؛ ) .cell (نمایش: جدول-سلول؛ ارتفاع: 100 پیکسل؛ تراز عمودی: وسط؛ )

من به صورت عمودی تراز شده ام

تراز پویا یک عنصر در یک صفحه

ما به روش هایی برای تراز کردن عناصر در صفحه با استفاده از CSS نگاه کردیم. حالا بیایید نگاهی به پیاده سازی jQuery بیندازیم.

بیایید jQuery را به صفحه وصل کنیم:

پیشنهاد می‌کنم یک تابع ساده بنویسید تا یک عنصر را در صفحه قرار دهید، بگذارید آن را alignCenter() بنامیم. خود عنصر به عنوان یک آرگومان برای تابع عمل می کند:

تابع alignCenter(elem) (// کد اینجا)

در بدنه تابع، به صورت پویا مختصات مرکز صفحه را به خصوصیات چپ و بالا CSS محاسبه و اختصاص می دهیم:

تابع alignCenter(elem) ( elem.css(( چپ: ($(window).width() - elem.width()) / 2 + "px"، بالا: ($(window).height() - elem. height()) / 2 + "px" // فراموش نکنید موقعیت را اضافه کنید: مطلق به عنصر برای ایجاد مختصات )) )

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

تابع آماده است، تنها چیزی که باقی می ماند این است که آن را به رویدادهای آمادگی DOM و تغییر اندازه پنجره متصل کنید:

$(function() ( // وقتی DOM آماده است تابع مرکز را فراخوانی کنید alignCenter($(elem)); // هنگام تغییر اندازه پنجره، تابع را فراخوانی کنید $(window).resize(function() ( alignCenter($(elem ))))) // تابع مرکزیت عنصر alignCenter(elem) (elem.css(( // محاسبه مختصات چپ و بالا سمت چپ: ($(window).width() - elem.width()) / 2 + " px، top: ($(window).height() - elem.height()) / 2 + "px" )) )))

کاربرد فلکس باکس

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

Wrapper (نمایش: -webkit-box؛ نمایش: -moz-box؛ نمایشگر: -ms-flexbox؛ نمایش: -webkit-flex؛ نمایش: flex؛ ارتفاع: 500px؛ عرض: 500px؛ ) .wrapper .content ( حاشیه: خودکار؛ /* حاشیه: 0 خودکار؛ فقط افقی */ /* حاشیه: خودکار 0؛ فقط عمودی */ ) Lorem ipsum dolor sit amet

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

منابع مرتبط به پروژه کمک کنید

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

بیایید با توضیح کلی مشکل شروع کنیم.

مشکل مرکزیت عمودی

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

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

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

مقدار ویژگی vertical-align نسبت به عنصر درون خطی والد است.

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

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

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

روش ارتفاع خط

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

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

HTML:

متن مورد نیاز

CSS:

#child (قد خط: 200 پیکسل؛ )

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

وسط تصویر با استفاده از ارتفاع خط

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

HTML:

CSS:

#parent (ارتفاع خط: 200 پیکسل؛ ) #img والد ( تراز عمودی: وسط؛ )

مقدار ویژگی line-height باید بیشتر از ارتفاع تصویر باشد.

روش جدول CSS

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

نکته: جدول CSS با جدول HTML یکی نیست.

HTML:

محتوا

CSS:

#والد (نمایش: جدول؛) #فرزند (نمایش: سلول جدول؛ تراز عمودی: وسط؛ )

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

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

عیب این روش این است که در نسخه های قدیمی IE کار نمی کند. باید از ویژگی display: inline-block برای ظرف تودرتو استفاده کنید.

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

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

کد مثال، مرکز افقی و عمودی را همزمان انجام می دهد:

HTML:

محتوا

CSS:

#والد (موقعیت: نسبی؛) #فرزند ( موقعیت: مطلق؛ بالا: 50٪؛ سمت چپ: 50٪؛ قد: 30٪؛ عرض: 50٪؛ حاشیه: -15٪ 0 0 -25٪؛ )

ابتدا نوع موقعیت یابی عنصر را تنظیم می کنیم. سپس، ویژگی های بالای و سمت چپ عنصر div تودرتو را روی 50% تنظیم می کنیم که مربوط به مرکز عنصر والد است. اما مرکز، گوشه سمت چپ بالای عنصر تودرتو است. بنابراین، باید آن را بلند کنید (نصف ارتفاع) و به سمت چپ (نصف عرض) حرکت دهید و سپس مرکز با مرکز عنصر والد منطبق شود. بنابراین دانستن ارتفاع عنصر در این مورد ضروری است. سپس عنصر را با حاشیه های منفی بالا و چپ به ترتیب برابر با نصف ارتفاع و عرض قرار می دهیم.

این روش در همه مرورگرها کار نمی کند.

موقعیت و کشش مطلق

کد مثال، مرکزیت عمودی و افقی را انجام می دهد.

HTML:

محتوا

CSS:

#والد (موقعیت: نسبی؛) #فرزند ( موقعیت: مطلق؛ بالا: 0؛ پایین: 0؛ چپ: 0؛ سمت راست: 0؛ عرض: 50%؛ قد: 30%؛ حاشیه: خودکار؛ )

ایده پشت این روش این است که با تنظیم ویژگی های بالا، پایین، راست و چپ روی 0، عنصر تودرتو به هر 4 مرز عنصر والد کشیده شود.

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

متأسفانه این روش در IE7 به بالا کار نمی کند.

فضاهای مساوی بالا و پایین

در این روش، padding برابر به صراحت در بالا و پایین عنصر والد تنظیم می شود.

HTML:

محتوا

CSS:

#والد ( بالشتک: 5% 0؛ ) #فرزند ( بالشتک: 10% 0؛ )

کد CSS مثال، لایه های بالا و پایین را برای هر دو عنصر تنظیم می کند. برای یک عنصر تو در تو، تنظیم بالشتک در مرکز عمودی آن عمل می کند. و بالشتک عنصر والد، عنصر تودرتو را درون آن مرکز خواهد کرد.

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

به عنوان مثال، اگر ارتفاع عنصر والد 400 پیکسل و عنصر تو در تو 100 پیکسل باشد، در این صورت 150 پیکسل در بالا و پایین نیاز است.

150 + 150 + 100 = 400

استفاده از % به شما امکان می دهد محاسبات را به مرورگر بسپارید.

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

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

شناور div

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

HTML:

محتوا

CSS:

#والد (قد: 250 پیکسل؛) # شناور ( شناور: سمت چپ؛ ارتفاع: 50 درصد؛ عرض: 100 درصد؛ حاشیه پایین: -50 پیکسل؛ ) #فرزند ( واضح: هر دو؛ قد: 100 پیکسل؛ )

div خالی را به سمت چپ یا راست آفست می کنیم و ارتفاع آن را 50% عنصر اصلی آن تنظیم می کنیم. به این ترتیب نیمه بالایی عنصر والد را پر می کند.

از آنجایی که این div شناور است، از جریان عادی سند حذف می‌شود و باید متن را روی عنصر تودرتو باز کنیم. در مثال از clear: هر دو استفاده می شود، اما استفاده از همان جهت به عنوان افست عنصر div خالی شناور کاملاً کافی است.

حاشیه بالایی یک عنصر div تو در تو درست زیر مرز پایینی یک عنصر div خالی است. باید عنصر تودرتو را به اندازه نصف ارتفاع عنصر خالی شناور به سمت بالا حرکت دهیم. برای حل مشکل، از مقدار ویژگی margin-bottom منفی برای یک عنصر div خالی شناور استفاده کنید.

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

نتیجه

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

هرکسی که با چیدمان سر و کار دارد دیر یا زود با نیاز به تراز کردن عناصر به صورت عمودی روبه‌رو می‌شود و می‌دانند که هنگام تراز کردن یک عنصر با مرکز چه مشکلاتی ممکن است پیش بیاید. در CSS یک ویژگی Vertical-align با مقادیر زیادی وجود دارد که به طور منطقی باید تراز عمودی را انجام دهد. با این حال، در عمل آن طور که انتظار می رود کار نمی کند.

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

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

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

HTML

CSS

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

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

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

HTML

CSS

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

2. تراز با استفاده از تورفتگی

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

CSS

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

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

3. تراز با استفاده از ارتفاع خط

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

CSS

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

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

CSS

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

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

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

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

برای اعمال این روش نیاز داریم:

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

CSS

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

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

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

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

CSS

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

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

6. تراز با استفاده از تبدیل

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

CSS

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

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

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

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

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

CSS

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

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

8. تراز با Flexbox

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