CSS: تراز عمودی متن. تراز عناصر

بیان مسئله: لازم است تراز عمودی برای عناصر درون خطی یا بلوک درونی درون یک عنصر بلوک تنظیم شود.

رویکردهای حل مسئله. راه های مختلفی وجود دارد، مهم ترین آنها را در نظر بگیرید:

1. عنصر بلوک را به عنوان یک سلول جدول نمایش دهید (نمایش: جدول-سلول).
2. IE6-7: روش بیان.
3. یکسان سازی فاصله خطوط (ویژگی خط-ارتفاع) و ارتفاع بلوک (برای عناصر تک خط).
4. تعیین موقعیت با یک بلوک خارجی (موقعیت: مطلق).

خوب، خلاصه، روش دیگری را در نظر بگیرید:

5. تراز کردن با ویژگی vertical-align.

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

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

طرفداران:

• سادگی؛
• هر دو خط منفرد و چند خط را تراز می کند.

معایب:

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

IE6-7: روش بیان

زیرا روش قبلی در IE6-7 کار نمی کند، پس باید این مزاحمت را برطرف کنید.

Expression - قطعات کوتاه کد JS که در یک stylesheet قرار می گیرند، یک بار اجرا می شوند و فقط در IE کار می کنند. عبارت نامعتبر است کد زیر را به مثال قبلی در فایل های سبک برای IE6 و 7 اضافه کنید:

Wrapper p ( z-index: express(runtimeStyle.zIndex = 1, this == ((200/2)-parseInt(offsetHeight)/2)< 0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +"px"); }

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

ارتفاع خط

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

طرفداران:

• سادگی؛
• سازگاری بین مرورگرها

معایب:

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

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

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

طرفداران:

• سازگاری بین مرورگرها؛
• می توانید عناصر را در مرکز یا در هر موقعیت دیگری تراز کنید.

معایب:

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

خلاصه ای از روش های محبوب

همانطور که می بینید، این روش ها جهانی نیستند - هر یک از آنها، هرچند کوچک، اما معایبی دارند. همه کاره ترین روش نمایش است: جدول-سلول، اما من هرگز آن را دوست نداشتم، و علاوه بر این، ما برای مدت طولانی از پشتیبانی از IE6-7 خودداری نکردیم. بنابراین، نیاز به کار بر روی چیزی جهانی تر وجود داشت. Alignment را با vertical-align در نظر بگیرید.

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

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

همانطور که می بینید، عناصر نسبت به خط، و نه کل بلوک، که برای ما مناسب نیست، تراز شده اند. سپس بیایید سعی کنیم عنصری را در داخل بلوک اضافه کنیم (از آنجایی که نمی‌توانید ارتفاع را برای یک عنصر درون خطی تنظیم کنید، عنصر باید بلوک درون خطی باشد) با ارتفاعی برابر با ارتفاع بلوک بیرونی. اضافه كردن (در تصویر زیر با خط خاکستری نشان داده شده است) و دریافت می کنیم:

تنظیم برای همه عناصر vertical-align:middle .

خوب، ما یک خط را به این ترتیب وسط قرار دادیم. اگر به چند خط نیاز دارید چه؟ و هیچ مشکلی وجود ندارد. فقط باید display:inline-block را برای عناصر متنی تنظیم کنید:

اگر سازگاری با نسخه های قدیمی IE برای ما مهم نیست، عنصر می‌توانیم استایل‌های آن را با موارد زیر حذف و جایگزین کنیم:

Wrapper:after ( محتوا:""؛ نمایش: inline-block؛ ارتفاع: 100%؛ عرض: 0px؛ سرریز: پنهان؛ عمودی تراز: وسط؛ )

شایان ذکر است چند نکته:

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

طرفداران:

نیاز به پرداخت ماهانه برای ارتقاء سایت در موتورهای جستجو. کار اصلی در سایت برای تبلیغ موثر آن و هزینه کار است
من می خواهم برای ارتقای سایت خود 1 بار هزینه کنم و همیشه در نتایج جستجو برای جستجوهای رقابتی بالا باشم، آیا این امکان وجود دارد؟

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

سوالات متداول تجزیه و تحلیل وب (سؤالات متداول)
سوالاتی که اغلب توسط مشتریان سرویس های تحلیل وب و ارائه خود سرویس پرسیده می شود. تجزیه و تحلیل وب چیست؟ چرا پروژه به تجزیه و تحلیل وب نیاز دارد؟ چرا نیاز به تعریف KPI دارید و آنها چیست؟ و غیره.

در صورت ارتقا در پیکسل پلاس چه آثاری شامل سئو نمی شود؟
ارتقاء موتور جستجو شامل لیست بزرگی از کارهای لازم برای دستیابی به حداکثر نتایج است ... اما چه نوع کاری در پرداخت سئو گنجانده نشده است؟

در دسترس بودن متون برای ارتقای وب سایت، بهینه سازی متون سئو برای پرس و جوهای جستجو
چرا به متن در سایت نیاز دارید؟ هیچ کس آن را نمی خواند!

زمان تبلیغ و ایجاد تغییرات در نتایج ارتقاء وب سایت، سرعت پاسخگویی Yandex (Yandex) به ایجاد تغییرات در سایت
من هزینه خدمات ارتقای سایت را به مدت یک ماه پرداخت کردم. 10 روز می گذرد و موقعیت ها در Yandex بهبود نیافته است، آیا شما آنجا کار می کنید یا نه؟

اغلب، هنگام چیدمان، نیاز به تراز عمودی متن در یک بلوک وجود دارد. اگر این کار باید در یک سلول جدول انجام شود، مقدار ویژگی 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، متمرکز کردن محتوا است. قرار دادن محتوا در مرکز افقی در برخی مقاطع زمانی نسبتاً آسان است. متمرکز کردن محتوا به صورت عمودی تقریباً همیشه دشوار است. وسط یک عنصر دیگر برای تراز عمودی با CSS. این مطمئناً یک سؤال بسیار متداول است که برای طراحان و مدیران وب سایت ها مشکل ایجاد می کند. با این حال، روش های زیادی برای انجام مرکز عمودی وجود دارد و استفاده از هر یک از آنها بسیار آسان است.

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

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

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

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

css

Constutesim_first(
حاشیه: 2px جامد #bf1515;
ارتفاع: 175 پیکسل؛
}
.constutesim_first > p(
خط ارتفاع: 175 پیکسل.
حاشیه: 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 کاملاً متفاوتی را تنظیم می کنیم، این عبارت است: display: table ;, display: table-cell ;. اگر در مورد قدیمی ترین نسخه های 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 چندین ویژگی معتبر دارد:

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

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

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

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

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

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

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

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

والد ( موقعیت: نسبی؛ ) .child ( موقعیت: مطلق؛ چپ: 50%؛ بالا: 50%؛ -webkit-transform: translate(-50%, -50%)؛ -moz-transform: translate(-50%) , -50%)؛ -ms-transform: translate(-50%, -50%)؛ -o-transform: translate(-50%, -50%)؛ transform: translate(-50%, -50%) ;)

• Chrome 4.0+
• فایرفاکس 3.6+
• اینترنت اکسپلورر 9+
• Opera 10.5+
• سافاری 3.1+

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

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

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 4.0+
• Opera 7.0+
• سافاری 1.0+

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

والد ( موقعیت: نسبی؛ ) .فرزند (موقعیت: مطلق؛ /* عرض و ارتفاع جعبه 2 بر حسب % */ ارتفاع: 50%؛ عرض: 50%؛ /* مقادیر بر اساس اندازه آن در درصد تعیین می شود. */ سمت چپ: 25٪؛ /* (100٪ - عرض) / 2 */ بالا: 25٪؛ /* (100٪ - ارتفاع) / 2 */)

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 4.0+
• Opera 7.0+
• سافاری 1.0+

CSS - تراز افقی

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

مسدود کردن (حاشیه-چپ: خودکار؛ حاشیه-راست: خودکار؛)

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 6.0+
• Opera 3.5+
• سافاری 1.0+

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

والد (تراز متن: مرکز؛ ) .child (نمایش: بلوک درون خطی؛)

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 3.0+
• اینترنت اکسپلورر 8.0+
• Opera 7.0+
• سافاری 1.0+

CSS - تراز عمودی

1. یک عنصر (نمایشگر: درون خطی، نمایشگر: بلوک درون خطی) را نسبت به دیگری (که در آن قرار دارد) در مرکز قرار دهید. کادر والد در این مثال دارای یک ارتفاع ثابت است که با استفاده از ویژگی line-height CSS تنظیم شده است.

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

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 3.0+
• اینترنت اکسپلورر 8.0+
• Opera 7.0+
• سافاری 1.0+

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

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

مرورگرهایی که از این راه حل پشتیبانی می کنند:

• Chrome 1.0+
• فایرفاکس 1.0+
• اینترنت اکسپلورر 8.0+
• Opera 7.5+
• سافاری 1.0+

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

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

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

ساده ترین راه برای استفاده از CSS تراز کردن جعبه هایی است که دارای ارتفاع از پیش تعیین شده (برای تراز عمودی) یا عرض (برای تراز افقی) هستند.

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

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

به عنوان مثال، یک تصویر 200 در 200 پیکسل وجود دارد و می خواهیم آن را در یک بلوک 240 در 300 وسط قرار دهیم. و 50 در چپ و راست.

.example-wrapper1 ( پس زمینه : #535E73 ؛ عرض : 200 پیکسل ؛ ارتفاع : 200 پیکسل ؛ بالشتک : 20 پیکسل 50 پیکسل ؛ )

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

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

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

.example-wrapper2 ( موقعیت: نسبی؛ ارتفاع: 250 پیکسل؛ پس‌زمینه: url(space.jpg)؛ ) 0؛ سمت راست: 0؛ حاشیه: خودکار؛ پس‌زمینه: url(king.png)؛ )

تراز افقی

تراز کردن با "text-align: center"

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

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

.example-text (Text-align: center; padding: 10px; background: #FF90B8; )

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

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

.example-wrapper3 (تراز متن: مرکز؛ پس‌زمینه: #FF90B8؛ .) متن درون خطی (نمایش: بلوک درون خطی؛ عرض: 40 درصد؛ پد: 10 پیکسل؛ تراز نوشتاری: چپ؛ پس‌زمینه: #FFE5E5؛ )

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

عناصر در سطح بلوک با عرض مشخص به راحتی با تنظیم آنها به صورت "Margin-left: auto; Margin-right: auto" به صورت افقی تراز می شوند. معمولاً از علامت اختصاری استفاده می شود: " حاشیه: 0 خودکار" (به جای صفر، هر مقداری می تواند وجود داشته باشد). اما برای تراز عمودی، این روش کار نخواهد کرد.

.lama-wrapper ( ارتفاع : 200 پیکسل ؛ پس زمینه : #F1BF88 ؛ ) .lama1 ( ارتفاع : 200 پیکسل ؛ عرض : 200 پیکسل ؛ پس زمینه : url (lama.jpg ؛ حاشیه : 0 خودکار ؛ )

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

چیدمان عمودی

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

تراز کردن با ویژگی line-height

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

.example-wrapper4 (ارتفاع خط: 100 پیکسل؛ رنگ: #DC09C0؛ پس‌زمینه: #E5DAE1؛ ارتفاع: 100 پیکسل؛ تراز نوشتاری: مرکز؛ )

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

.example-wrapper5 (ارتفاع خط: 160 پیکسل؛ ارتفاع: 160 پیکسل؛ اندازه قلم: 0؛ پس‌زمینه: #FF9B00؛ ) 1.5؛ تراز عمودی: وسط؛ پس‌زمینه: #FFFAF2؛ رنگ: #FF9B00; ;)

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

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

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

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

.one_product .img_wrapper (نمایش: سلول جدول؛ ارتفاع: 169 پیکسل؛ تراز عمودی: وسط؛ سرریز: پنهان؛ پس‌زمینه: #fff؛ عرض: 255 پیکسل؛ ) .one_product img (حداکثر ارتفاع: 169-10 پیکسل؛ حداکثر % ؛ حداقل عرض : 140 پیکسل ؛ نمایشگر : بلوک ؛ حاشیه : 0 خودکار ؛ )

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

تراز کردن با یک عنصر درون خطی اضافی

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

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

.example-wrapper6 (ارتفاع: 300 پیکسل؛ تراز نوشتاری: مرکز؛ پس‌زمینه: #70DAF1؛ ) .pudge (نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ پس‌زمینه: url (pudge.png)؛ رنگ پس‌زمینه: # fff ؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .riki (نمایشگر: بلوک درون خطی؛ ارتفاع: 100 درصد؛ تراز عمودی: وسط؛ )

صفحه نمایش: انعطاف پذیری و تراز

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

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

.example-wrapper7 (نمایشگر: انعطاف پذیر؛ ارتفاع: 300 پیکسل؛ پس زمینه: #AEB96A؛ ) .example-wrapper7 img (حاشیه: خودکار؛ )

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