تراز افقی div به مرکز css. وسط div و سایر ظرافت های موقعیت یابی

CSS

HTML

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

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

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

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

برای تشریح، مثال زیر را در نظر بگیرید.

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

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

اول، اجازه دهید موردی را در نظر بگیریم که ابعاد بلوک های خارجی و داخلی شناخته شده. بیایید نمایش قانون را اضافه کنیم: inline-block به عنصر داخلی، و text-align: center و vertical-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: قوانین میانی.

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

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

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

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

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

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

بیرونی ( موقعیت: نسبی؛ ) .داخلی (ارتفاع: 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/

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

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

تراز با Flexbox

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

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

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

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

کدام روش را انتخاب کنم؟

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

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

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

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

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

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

و بنابراین، ما یک بلوک داریم، ارتفاع آن می تواند تغییر کند:

اولین چیزی که به ذهن می رسد این است که ظاهرسازی زیر را انجام دهید:

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

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

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

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

فرض کنید یک خط از متن دارید که توسط تگ های خط شکسته شده است به قطعات:

شما استقبال می کند قطعهمتن

تگ درون خطی محفظه‌ای است که ظاهر آن باعث نمی‌شود محتوا به یک خط جدید بسته شود.

عمل تگ بلوک باعث می شود که محتویات ظرف به یک خط جدید بپیچد.

یک تگ بلوک است. اگر قطعات متن را در بلوک ها محصور کنیم

, سپس هر یک از آنها در یک خط جدید قرار خواهند گرفت. استفاده از برچسب ، که بر خلاف

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

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

برای ظروف ویژگی های CSS زیر را اعمال کنید:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

خط حاصل از متن به شکل زیر خواهد بود:

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

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

تراز عمودی در ظرف div

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

چگونه می توانیم از این استفاده کنیم؟ ما یک میز نداریم، ما با یک ظرف div کار می کنیم.

ها، معلوم است که بسیار ساده است.

ویژگی CSS نمایش دادنبه شما امکان می دهد بلوک div خود را به یک سلول جدول تبدیل کنید، این کار را می توان به راحتی و به طور طبیعی انجام داد:

بیایید بگوییم که یک گروه کلاس داریم textalign:

برای این بلوک ویژگی CSS زیر را مشخص می کنیم:

Textalign (نمایش: سلول جدول؛ )

این دستور CSS به طور معجزه آسایی div ما را بدون تغییر بصری به سلول جدول تبدیل می کند. و برای سلول جدول می توانیم خاصیت را اعمال کنیم تراز عمودیبه طور کامل و تراز عمودی مورد نظر کار خواهد کرد.

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

راه های زیادی برای دستیابی به تراز در یک ظرف div برای همه مرورگرها وجود دارد:

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

همانطور که متوجه شدید، ما فقط باید مشکل تراز عمودی در اینترنت اکسپلورر مرتبط با درک نادرست آن از ویژگی را حل کنیم. صفحه نمایش: سلول جدول(نه IE6، نه IE7 و نه IE8با این ویژگی آشنا نیست). بنابراین، با استفاده از نظر مشروطما ویژگی های مختلف CSS را به طور خاص برای مرورگرهای IE مشخص می کنیم.

نظر مشروط

نوع ساخت:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

کامنت شرطی نامیده می شود (مراقب باشید نوع کامنت شرطی باید کاملاً با مثال داده شده تا یک فاصله مطابقت داشته باشد).

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

بنابراین، با استفاده از یک نظر شرطی، می‌توانیم یک قطعه کد را از همه مرورگرها به جز IE پنهان کنیم.

راه حل مشکل

به دلیل این همه جعفری، باید کد HTML خود را با دو ظرف اضافی ارائه کنیم. بلوک متن ما به این صورت خواهد بود:

برای کانتینر کلاس div textalignویژگی های CSS تنظیم شده اند که محتوای آن را به صورت عمودی برای همه مرورگرهای معمولی تراز می کند (البته به جز IE):

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

و دو ویژگی دیگر که عرض و ارتفاع بلوک را تعیین می کند:

عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛

این برای تراز کردن محتویات ظرف در مرکز نسبت به عمودی در همه مرورگرها کافی است به جز IE.

اکنون شروع به اضافه کردن ویژگی های مربوط به align می کنیم برای مرورگرهای خانواده IE(برای آنها است که ما از بلوک های اضافی استفاده کردیم بخشو طول):

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

Textalign div( موقعیت: مطلق؛ بالا: 50%؛ )

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

بر این اساس، سبک های مشخص شده برای بلوک textalignاصلاح می شوند:

Textalign (نمایش: سلول جدول؛ تراز عمودی: وسط؛ عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛ موقعیت: نسبی؛ )

اکنون نقطه بالا سمت چپ بلوک متن 50 درصد به پایین منتقل شده است.

برای توضیح آنچه در حال رخ دادن است، یک تصویر کشیدم:

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

حالا تگ وارد بازی می شود طولو موقعیت نسبی آن:

Textalign span( موقعیت: نسبی؛ بالا: -50%؛ )

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

بیایید کمی کلک بازی کنیم

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

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

راه حل مشکل:نیاز به اضافه کردن یک ملک سرریز: پنهانمسدود کردن textalign

با جزئیات ملک آشنا شوید سرریزممکن در .

آخرین دستورالعمل های CSS برای بلوک textalignدارای فرم:

Textalign (نمایش: سلول جدول؛ تراز عمودی: وسط؛ عرض: 500 پیکسل؛ ارتفاع: 500 پیکسل؛ موقعیت: نسبی؛ سرریز: پنهان؛ حاشیه: 1 پیکسل سیاه و سفید؛ )

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

مرکز در بلوک ارتفاع متغیر

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

نکته مهم این است که انجام این کار برای یک سلول جدول غیرممکن است (اما بلوک کلاس textalignبه لطف ویژگی دقیقاً به یک سلول جدول تبدیل می شود نمایش: سلول جدول).

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

برای پیاده سازی یک بلوک ارتفاع متغیر در مثال ما، CSS را کمی ویرایش می کنیم:

به کلاس textalignما ارزش ملک را تغییر خواهیم داد نمایش دادنبا سلول جدولبر جدولو دستورالعمل تراز را حذف کنید عمودی- تراز: وسط. اکنون می توانیم با خیال راحت مقدار ارتفاع را از 500 پیکسل به مثلاً 100 درصد تغییر دهیم.

بنابراین ویژگی های CSS برای بلوک کلاس textalignبه این صورت خواهد بود:

Textalign (نمایش: جدول؛ عرض: 500 پیکسل؛ ارتفاع: 100 درصد؛ موقعیت: نسبی؛ سرریز: پنهان؛ حاشیه: 1 پیکسل سیاه و سفید؛ )

تنها چیزی که باقی می ماند پیاده سازی محتوا محور است. برای انجام این کار، یک ظرف div در یک بلوک کلاس تودرتو است textalign(این همان بلوک زرد رنگ در تصویر است)، باید ویژگی CSS را تنظیم کنید نمایش: سلول جدول، سپس ارتفاع 100% را از بلوک والد به ارث می برد textalign(بلوک بنفش). و هیچ چیز ما را از تراز کردن محتویات ظرف div تودرتو در مرکز با ویژگی باز نمی دارد عمودی- تراز: وسط.

ما یک لیست اضافی دیگر از ویژگی های CSS برای بلوک div تو در تو در ظرف دریافت می کنیم textalign.

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

تمام ترفند همین است. در صورت تمایل، می توانید ارتفاع متغیر با محوریت محتوا داشته باشید.

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

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

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

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

< div id = "wrapper" > < div id = "header" > < / div > < / div >

بیایید فرض کنیم که این هدر سایت است. در تمام عرض پنجره کشیده نمی شود و باید آن را در مرکز قرار دهیم. اینگونه می نویسیم:

#سرتیتر( عرض / حداکثر عرض : 800 پیکسل . حاشیه: 0 خودکار;

باید عرض دقیق یا حداکثر را مشخص کنیم و سپس ویژگی key - margin: 0 auto را یادداشت کنیم. حاشیه های بیرونی هدر ما را تعیین می کند، مقدار اول حاشیه های بالا و پایین را تعیین می کند و دومی حاشیه های راست و چپ را تعیین می کند. مقدار auto به مرورگر می‌گوید که به طور خودکار padding را در هر دو طرف محاسبه کند تا عنصر دقیقاً روی والد خود متمرکز شود. راحت!

تراز متن

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

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

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

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

div( پس‌زمینه: #cccc؛ padding: 30px 0; )

div( پس زمینه : #ccc; padding: 30px 0;

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

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

div( ارتفاع: 60 پیکسل؛ ارتفاع خط: 60 پیکسل؛ )

div( ارتفاع: 60 پیکسل؛ ارتفاع خط: 60 پیکسل؛

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

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

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

div( نمایش: جدول - سلول. عمودی - تراز: وسط;

این روش خوب است زیرا می توانید هر تعداد متن را که دوست دارید در مرکز تراز کنید. اما بهتر است در بلوکی که div ما در آن قرار دارد، display: table بنویسیم، در غیر این صورت ممکن است کار نکند.

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

تورفتگی ها را به صورت درصد تنظیم کنید. اگر ارتفاع عنصر والد را می‌دانید و عنصر بلوکی دیگری را درون آن قرار می‌دهید، می‌توانید آن را با استفاده از درصد padding در مرکز قرار دهید. به عنوان مثال، ارتفاع والد 600 پیکسل است. یک بلوک با ارتفاع 300 پیکسل در آن قرار می دهید. چقدر باید از بالا و پایین عقب نشینی کنید تا آن را در مرکز قرار دهید؟ هر کدام 150 پیکسل که 25 درصد قد والدین است.

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

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

و اگر علاوه بر این، margin: 0 auto را نیز بنویسیم، عنصر به صورت افقی وسط می شود!

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

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

بیایید در مورد ویژگی CSS vertical align صحبت کنیم

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

ویژگی CSS با تراز عمودیبا جداول عالی کار می کند، اما نه با div یا عناصر دیگر. وقتی از آن در یک div استفاده می کنید، عنصر را نسبت به سایر div ها تراز می کند، اما نه محتوای آن. در این مورد، ویژگی فقط با نمایش کار می کند: inline-block; .

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

ما می خواهیم محتوا را در مرکز قرار دهیم، نه خود div را!

شما دو گزینه دارید. اگر فقط عناصر div با متن دارید، می توانید از ویژگی line-height استفاده کنید. این بدان معنی است که شما باید ارتفاع عنصر را بدانید، اما نمی توانید آن را تنظیم کنید. به این ترتیب متن شما همیشه در مرکز خواهد بود.

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

به این مثال نگاهی بیندازید

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

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

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

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

دارایی موقعیت

بیایید با اصول تراز عمودی CSS div شروع کنیم:

• موقعیت: استاتیک پیش فرض است. عنصر بر اساس ترتیب HTML ارائه می شود.
• موقعیت: مطلق - برای تعیین موقعیت دقیق یک عنصر استفاده می شود. این موقعیت همیشه مربوط به نزدیکترین عنصر والد نسبتاً قرار دارد (نه ایستا). اگر موقعیت دقیق یک عنصر را تعیین نکنید، کنترل آن را از دست خواهید داد. به طور تصادفی ظاهر می شود و به طور کامل جریان سند را نادیده می گیرد. به طور پیش فرض، عنصر در گوشه سمت چپ بالا ظاهر می شود.
• موقعیت: نسبی - برای قرار دادن یک عنصر نسبت به موقعیت عادی آن (استاتیک) استفاده می شود. این مقدار ترتیب جریان سند را حفظ می کند.
• موقعیت: ثابت - برای قرار دادن عنصر نسبت به پنجره مرورگر استفاده می شود به طوری که همیشه در viewport قابل مشاهده باشد.

توجه: برخی از خواص ( بالا و z-index) فقط در صورتی کار می کند که عنصر روی موقعیت (نه ایستا).

بریم به کسب و کار برسیم!

آیا می خواهید اجرا کنید تراز عمودی مرکز CSS? ابتدا یک عنصر با موقعیت و ابعاد نسبی ایجاد کنید. به عنوان مثال: 100٪ در عرض و ارتفاع.

مرحله دوم ممکن است بسته به مرورگرهای مورد نظر متفاوت باشد، اما می توانید از یکی از دو گزینه استفاده کنید:

• ویژگی قدیمی: برای حذف نیمی از عرض و نیمی از ارتفاع، باید اندازه دقیق پنجره را بدانید. نمونه را ببینید;
• ویژگی جدید CSS3: می توانید یک ویژگی تبدیل با مقدار ترجمه 50% اضافه کنید و بلوک همیشه در مرکز خواهد بود. مشاهده نمونه.

اساساً، اگر می خواهید محتوا را در مرکز قرار دهید، هرگز از بالا استفاده نکنید: 40%یا سمت چپ: 300 پیکسل این روی صفحه های آزمایشی به خوبی کار می کند، اما در مرکز نیست.

موقعیت را به خاطر بسپار: ثابت؟ می‌توانید همان کاری را که با موقعیت مطلق انجام می‌دهید، انجام دهید، اما برای عنصر والد نیازی به موقعیت نسبی ندارید - این عنصر همیشه نسبت به پنجره مرورگر قرار می‌گیرد.

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

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

مشاهده نمونه

با استفاده از طرح‌بندی flexbox، می‌توانید چندین بلوک را در مرکز قرار دهید.

اگر آنچه را که از این مثال ها می آموزید به کار ببرید، می توانید تسلط پیدا کنید هم ترازی بلوک عمودی CSSدر اسرع وقت.

لینک ها و ادامه مطلب

آموزش نشانه گذاری CSS

FlexBox Froggy

سندباکس فلکس باکس

ترجمه مقاله ” تراز عمودی CSS برای همه (دکورها گنجانده شده است)” توسط تیم پروژه دوستانه تهیه شده است.

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

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

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

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

برای تشریح، مثال زیر را در نظر بگیرید.

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

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

اول، اجازه دهید موردی را در نظر بگیریم که ابعاد بلوک های خارجی و داخلی شناخته شده. بیایید نمایش قانون را اضافه کنیم: inline-block به عنصر داخلی، و text-align: center و vertical-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: قوانین میانی.

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

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

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

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

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

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

بیرونی ( موقعیت: نسبی؛ ) .داخلی (ارتفاع: 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/

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

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

تراز با Flexbox

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

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

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

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

کدام روش را انتخاب کنم؟

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

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

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