هر طراح صفحه‌آرایی دائماً با نیاز به تراز کردن محتوا در یک بلوک مواجه است: افقی یا عمودی. چندین مقاله خوب در مورد این موضوع وجود دارد، اما همه آنها گزینه های بسیار جالب، اما کمی کاربردی را ارائه می دهند، به همین دلیل است که باید زمان بیشتری را صرف برجسته کردن نکات اصلی کنید. تصمیم گرفتم این اطلاعات را به شکلی که برای من مناسب است ارائه دهم تا دیگر در گوگل جستجو نکنم.
تراز کردن بلوک ها با اندازه های شناخته شده
ساده ترین راه برای استفاده از CSS تراز کردن بلوک هایی است که دارای ارتفاع مشخص (برای تراز عمودی) یا عرض (برای تراز افقی) هستند.
تراز کردن با استفاده از پد
گاهی اوقات نمی توانید یک عنصر را در مرکز قرار دهید، اما با استفاده از "" حاشیه هایی را به آن اضافه کنید. لایه گذاری".
به عنوان مثال، یک تصویر 200 در 200 پیکسل وجود دارد و باید آن را در یک بلوک 240 در 300 در مرکز قرار دهید. ، و 50 در چپ و راست.
.example-wrapper1 ( پس زمینه : #535E73 ؛ عرض : 200 پیکسل ؛ ارتفاع : 200 پیکسل ؛ بالشتک : 20 پیکسل 50 پیکسل ؛ )تراز کردن بلوک‌های کاملاً موقعیت‌یافته
اگر بلوک روی " تنظیم شود موقعیت: مطلق"، سپس می توان آن را نسبت به نزدیک ترین والد خود با "position: relative" قرار داد. این به همه ویژگی ها نیاز دارد (" بالا","درست","پایین","ترک کرد") از بلوک داخلی برای تخصیص همان مقدار، و همچنین "حاشیه: خودکار".
*یک نکته ظریف وجود دارد: عرض (ارتفاع) بلوک داخلی + مقدار سمت چپ (راست، پایین، بالا) نباید از ابعاد بلوک مادر تجاوز کند. اختصاص دادن 0 (صفر) به ویژگی های چپ (راست، پایین، بالا) ایمن تر است.
.example-wrapper2 ( موقعیت : نسبی ؛ ارتفاع : 250 پیکسل ؛ پس زمینه : url (space.jpg ) ؛ ) .cat-king ( عرض : 200 پیکسل ؛ ارتفاع : 200 پیکسل ؛ موقعیت : مطلق ؛ بالا : 0 ؛ چپ : 0 ؛ پایین : 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 پیش بینی نشده بود. راه های مختلفی برای رسیدن به نتیجه دلخواه وجود دارد، اما همه آنها خیلی زیبا نیستند.
تراز با ویژگی خط-ارتفاع
در مواردی که فقط یک خط در یک بلوک وجود دارد، می‌توانید با استفاده از "" به تراز عمودی آن برسید. ارتفاع خط" و آن را روی ارتفاع دلخواه تنظیم کنید. برای اطمینان، ارزش آن را دارد که "height" را نیز تنظیم کنید، که مقدار آن برابر با مقدار "line-height" خواهد بود، زیرا دومی در همه مرورگرها پشتیبانی نمی شود.
.example-wrapper4 (ارتفاع خط: 100 پیکسل؛ رنگ: #DC09C0؛ پس‌زمینه: #E5DAE1؛ ارتفاع: 100 پیکسل؛ تراز نوشتاری: مرکز؛ )همچنین امکان دستیابی به تراز بلوک با چندین خط وجود دارد. برای انجام این کار، باید از یک بلوک بسته بندی اضافی استفاده کنید و ارتفاع خط را روی آن تنظیم کنید. یک بلوک داخلی می تواند چند خطی باشد، اما باید "داخلی" باشد. شما باید "Tertical-align: Middle" را روی آن اعمال کنید.
نمونه 1.5؛ تراز عمودی: وسط؛ پس‌زمینه: #FFFAF2؛ رنگ: #FF9B00؛ تراز نوشتاری: مرکز؛ )بلوک wrapper باید دارای "اندازه فونت: 0" باشد. اگر اندازه فونت را صفر نکنید، مرورگر چند پیکسل اضافی اضافه می کند. همچنین باید اندازه فونت و ارتفاع خط را برای بلوک داخلی مشخص کنید، زیرا این ویژگی ها از والد به ارث برده می شوند.
تراز عمودی در جداول
ویژگی " تراز عمودی" روی سلول های جدول نیز تاثیر می گذارد. با تنظیم مقدار "middle"، محتوای داخل سلول در مرکز تراز می شود. البته چینش جدول امروزه قدیمی در نظر گرفته می شود، اما در موارد استثنایی می توانید با تعیین "" آن را شبیه سازی کنید. نمایش: سلول جدول".
من معمولا از این گزینه برای تراز عمودی استفاده می کنم. در زیر نمونه ای از چیدمان برگرفته از یک پروژه تکمیل شده است. این تصویری است که به صورت عمودی به این شکل در مرکز قرار گرفته است که مورد توجه است.
.one_product .img_wrapper (نمایش: سلول جدول؛ ارتفاع: 169 پیکسل؛ تراز عمودی: وسط؛ سرریز: پنهان؛ پس‌زمینه: #fff؛ عرض: 255 پیکسل؛ ) .one_product img (حداکثر ارتفاع: 169-10 پیکسل؛ حداکثر %؛ حداقل عرض: 140 پیکسل؛ نمایشگر: بلوک؛ حاشیه: 0 خودکار؛ )لازم به یادآوری است که اگر عنصری دارای مجموعه "شناور" غیر از "هیچ" باشد، در هر صورت بلوک خواهد بود (نمایش: بلوک) - پس باید از یک بسته بندی بلوک اضافی استفاده کنید.
تراز کردن با یک عنصر درون خطی اضافی
و برای عناصر درون خطی می توانید از " استفاده کنید عمودی- تراز: وسط". علاوه بر این، همه عناصر با " نمایشگر: درون خطی"که در یک خط قرار دارند با یک خط مرکزی مشترک تراز خواهند شد.
شما باید یک بلوک کمکی با ارتفاعی برابر با ارتفاع بلوک مادر ایجاد کنید، سپس بلوک مورد نظر در مرکز قرار می گیرد. برای انجام این کار، استفاده از شبه عناصر:before یا:after راحت است.
نمونه fff ؛ عرض: 200 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .riki (نمایش: بلوک درون خطی؛ ارتفاع: 100 درصد؛ تراز عمودی: وسط؛ )صفحه نمایش: انعطاف پذیری و تراز
اگر به کاربران اکسپلورر 8 اهمیت زیادی نمی‌دهید، یا آنقدر اهمیت می‌دهید که می‌خواهید یک جاوا اسکریپت اضافی برای آنها درج کنید، می‌توانید از «display: flex» استفاده کنید. جعبه‌های فلکس در برخورد با مسائل هم‌ترازی عالی هستند، و فقط «حاشیه: خودکار» را بنویسید تا محتوا را در مرکز قرار دهید.
تا به حال عملاً با این روش مواجه نشده ام اما محدودیت خاصی برای آن وجود ندارد.
خب، این تمام چیزی است که می‌خواستم در مورد چینش CSS بنویسم. حالا تمرکز محتوا مشکلی نخواهد داشت!
متن CSSمجموعه ای از ویژگی ها را برای قالب بندی محتوای متنی صفحات وب نشان می دهد. استفاده از سبک‌های CSS برای قالب‌بندی متن به شما این امکان را می‌دهد که به عناصر HTML ظاهر دلخواه را بدهید، به طوری که تگ‌های HTML فقط برای هدف مورد نظر خود - برای تعریف ساختار سند - استفاده شوند.
درباره ویژگی های متن اضافه شده به مشخصات CSS3- سرریز متن، شکستن کلمه، بسته بندی کلمه، قابل خواندن است.
قالب بندی متن در CSS
1. متن افقی تراز
این ویژگی خطوط متن را در داخل یک بلوک در عرض نسبت به مرزهای آن تراز می کند. فقط برای عناصر سطح بلوک، مانند پاراگراف ها اعمال می شود. به ارث برده.
| ارزش های: | |
| ترک کرد | در لبه سمت چپ عنصر تراز کنید. مقدار پیش‌فرض برای زبان‌هایی که از چپ به راست می‌خوانند. |
| درست | در لبه سمت راست عنصر تراز کنید. |
| مرکز | Element Center Align تراز محتوا را به جای خود عناصر کنترل می کند. هر خط متن را در یک عنصر در مرکز قرار می دهد. |
| توجیه | با عرض عنصر تراز کنید. در متن توجیه‌شده، هر دو انتهای خط روی لبه‌های چپ و راست عنصر اصلی فشار داده می‌شوند. فاصله بین کلمات و حروف به گونه ای توزیع می شود که طول تمام خطوط برابر باشد. مرورگرهای مختلف ممکن است هم تورفتگی بین کلمات و هم فاصله بین حروف را افزایش دهند. |
| اولیه | |
| به ارث می برند | |
نحو
P (تراز کردن متن: چپ؛) p (تراز کردن متن: راست؛) p (تراز کردن متن: مرکز؛) p (تراز کردن متن: توجیه؛) 
برنج. 1. ویژگی Text-align
2. Text-indent
تورفتگی (padding) را روی خط اول یک عنصر قرار می دهد و توهم متن ساختار یافته را ایجاد می کند. برای هر عنصر بلوکی اعمال می شود، مقدار پیش فرض 0 است. اگر تصویری در خط اول یک عنصر بلوک وجود داشته باشد، همراه با بقیه متن حرکت می کند. به ارث برده.
نحو
P (تورفتگی نوشتاری: 5 پیکسل؛) p (تورفتگی نوشتاری: 2٪؛) 
برنج. 2. ویژگی Text-indent
3. ارتفاع خط
برنج. 3. ظرف رشته ای این ویژگی فاصله بین خطوط پایه خطوط متن را مشخص می کند و میزان افزایش یا کاهش ارتفاع بلوک هر عنصر را تعیین می کند. فاصله خطوط را کنترل می کند - فضای اضافی بین خطوط بالا و پایین متن. برای تعیین فاصله خطوط، باید تفاوت بین ارتفاع خط و اندازه قلم را پیدا کنید، تفاوت را بر دو تقسیم کنید و هر نیمه را به قسمت محتوا در بالا و پایین اضافه کنید. فقط ارزش های مثبت را می پذیرد. فاصله خطوط استاندارد معادل 120 درصد است.
اگر مقادیر ارتفاع و ارتفاع خط برابر باشند، متن را در ارتفاع تراز می کند. به ارث برده.
نحو
H1 (ارتفاع خط: 20 پیکسل؛) h1 (ارتفاع خط: 200٪؛) h1 (ارتفاع خط: 1.2؛) h1 (ارتفاع خط: عادی؛) 
برنج. 4. نمونه ای از نمایش مقادیر مختلف فاصله خطوط
4. تراز عمودی عمودی-تراز
فقط برای عناصر درون خطی، تصاویر و فیلدهای فرم اعمال می شود. محتویات یک عنصر بلوک را تراز نمی کند. ارثی نیست.
| تراز عمودی | |
|---|---|
| ارزش های: | |
| خط پایه | خط پایه یک عنصر را با خط پایه اصلی آن تراز می کند، خط مرکزی عنصر را با خط مرکزی عنصر والد تراز می کند. |
| زیر | عنصر را زیرنویس می کند (شبیه به تگ ). مقدار کاهش یک عنصر ممکن است بسته به مرورگر کاربر متفاوت باشد. |
| فوق العاده | بالانویس عنصر را می سازد (شبیه به تگ ). با این حال، مقادیر sup و super اندازه فونت را تغییر نمی‌دهند؛ به‌طور پیش‌فرض، متن زیرنویس و عناصر زیرنویس هم اندازه متن عنصر والد است. |
| بالا | لبه بالایی عنصر با لبه بالایی بلندترین عنصر در خط تراز است. |
| متن بالا | لبه بالایی عنصر با لبه بالای فونت عنصر اصلی تراز می شود. |
| وسط | خط وسط یک عنصر (معمولاً یک تصویر) با خطی از وسط عنصر اصلی آن تراز می شود. |
| پایین | لبه پایینی عنصر با لبه پایینی پایین ترین عنصر در خط تراز است. |
| متن-پایین | لبه پایین عنصر با لبه پایین فونت عنصر والد همسو می شود. |
| طول | مقداری را بر حسب واحد طول تنظیم می کند و عنصر را در فاصله مشخصی جابجا می کند. |
| % | اجازه تنظیم وسط را نمی دهد، به عنوان بخشی از ارتفاع خط عنصر محاسبه می شود، نه والد آن، یعنی. اگر تراز عمودی را برای عنصری با ارتفاع خط 20 پیکسل روی 50٪ تنظیم کنید، خط پایه عنصر 10 پیکسل افزایش می یابد. |
| اولیه | مقدار ویژگی را به مقدار پیش فرض تنظیم می کند. |
| به ارث می برند | مقدار ویژگی را از عنصر والد به ارث می برد. |
Html یک پارامتر جهانی وجود دارد و به آن ALIGN می گویند. می توان از آن با تگ های مختلف html استفاده کرد:
p | h1 | div | جدول | سر | tbody | tfoot | tr | th | td
مقادیر ممکن:
مرکز- تراز وسط
ترک کرد- تراز چپ
درست- سمت راست
توجیه- در عرض، در امتداد لبه های چپ و راست. در این حالت ممکن است فاصله های زیادی بین کلمات ظاهر شود.
متن با عرض تراز شده است
ظاهر در مرورگر:
عنوان در مرکز قرار دارد
متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است. متن در عرض تراز شده است.
محتوای این بلوک در سمت راست تراز شده است
لطفاً توجه داشته باشید که تراز چپ به طور خودکار انجام می شود. بنابراین نیازی به تعیین چنین مقداری برای پارامتر align نیست.
تا به حال، ما عناصر را فقط در سمت چپ تراز کرده ایم. به طور دقیق تر، من و شما اصلاً این کار را انجام ندادیم و خود مرورگر به طور پیش فرض عناصر را در سمت چپ تراز می کند. البته، تراز کردن همه چیز به سمت چپ بسیار کسل کننده خواهد بود. بنابراین، روش های مختلفی برای تراز وسط و راست وجود دارد.
هم ترازی عناصر چیزی است که هنگام انجام این کار فقط باید بدانید. اولین کاری که باید انجام دهید این است که یک صفحه ساده را تایپ کنید.
روزی روزگاری یک برچسب وجود داشت
می‌توانید یک عکس اضافه کنید، همچنین با استفاده از برچسب به خط بعدی برویم
:
عنوان سطح 1، تراز وسط
یک تگ بود
برای حل این مشکل، توسعه دهندگان راهی جهانی برای تراز کردن عناصر پیدا کردند HTML. روش استفاده از به اصطلاح کانتینرها است که با استفاده از تگ ایجاد می شوند همین الان هم بنویسیم کد HTML، اما با استفاده از ظروف، علاوه بر این، اجازه دهید نه به مرکز، بلکه به سمت راست تراز کنیم. همانطور که می بینید، همه چیز کار می کند. من به شما توصیه می کنم که مقادیر ویژگی را نیز تغییر دهید " تراز کردنبرای بررسی انواع دیگر تراز محتوای کانتینر. راه دیگری برای تراز کردن عناصر HTML- اینها جداول هستند، اما این موضوع مستحق بحث جداگانه است، بنابراین در یکی از مقالات زیر در مورد آن صحبت خواهیم کرد. در حال حاضر، صفحه شما باید به شکل زیر باشد: با احترام، میخائیل روساکوف. P.S.اگر می خواهید بیشتر بدانید HTML، سپس نگاهی به دوره رایگان من با نمونه ای از ایجاد وب سایت در HTML: تراز متن ظاهر آن و جهت لبه های پاراگراف را تعیین می کند و می تواند به چپ، راست، وسط یا توجیه شود. روی میز شکل 1 گزینه هایی را برای تراز کردن یک بلوک متن نشان می دهد. Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. رایج ترین گزینه تراز چپ است، جایی که متن سمت چپ به لبه فشار داده می شود در حالی که متن سمت راست ناهموار باقی می ماند. تراز راست و مرکز عمدتاً در سرفصل ها و زیر عنوان ها استفاده می شود. در نظر داشته باشید که هنگام استفاده از توجیه ممکن است فاصله های زیادی بین کلمات متن ظاهر شود که چندان جذاب نیست. تگ پاراگراف معمولاً برای تنظیم تراز متن استفاده می شود با ویژگی align که روش تراز را مشخص می کند. همچنین امکان تراز کردن یک بلوک از متن با استفاده از یک برچسب وجود دارد متن متن متن متن تراز چپ عناصر به طور پیش فرض تنظیم شده است، بنابراین نیازی به تعیین مجدد آن نیست. بنابراین align="left" را می توان حذف کرد. تفاوت بین پاراگراف (برچسب ) و تگ کنید ویژگی align کاملاً جهانی است و می تواند نه تنها برای متن اصلی، بلکه برای عناوین مانند اعمال شود مثال 1: ترازبندی متن
روش Brute Force ما بیابان را به تعدادی قسمت ابتدایی تقسیم می کنیم که اندازه آنها با ابعاد کلی شیر منطبق است، اما از اندازه قفس کوچکتر است. در مرحله بعد، با جستجوی ساده منطقه ای را که شیر در آن قرار دارد را تعیین می کنیم که به طور خودکار منجر به گرفتن آن می شود. روش دوگانگی کویر را به دو نیم تقسیم می کنیم. در یک قسمت شیر است، در قسمت دیگر هیچ. نیمه ای که شیر در آن قرار دارد را می گیریم و دوباره آن را به دو نیم تقسیم می کنیم. این کار را تا زمانی که شیر صید شود تکرار می کنیم. نتیجه مثال در شکل نشان داده شده است. 1. برنج. 1. متن را به راست و چپ تراز کنید در این مثال، عنوان در مرکز پنجره مرورگر، پاراگراف برجسته شده در سمت راست و متن متن در سمت چپ تراز شده است.
عنوان سطح 1، تراز وسط
عنوان سطح 1، تراز راست
جدول 1. راه هایی برای تراز کردن متن
تراز چپ
تراز سمت راست
تراز وسط
توجیه
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
جدول 2. تراز کردن متن با استفاده از پارامتر align
کد HTML
شرح
یک پاراگراف جدید از متن اضافه می کند که به طور پیش فرض در سمت چپ تراز شده است. تورفتگی های عمودی کوچک به طور خودکار قبل و بعد از پاراگراف ها اضافه می شوند.
تراز وسط.
تراز چپ.
تراز عرضی.
بسته بندی خودکار خط را غیرفعال می کند، حتی اگر متن از پنجره مرورگر بازتر باشد.
متن
به مرورگر اجازه می دهد تا یک خط را در مکان مشخص شده بشکند، حتی اگر از یک برچسب استفاده شود
تراز وسط.
تراز چپ.
تراز سمت راست.
تراز عرضی.
. مثال 1 نحوه تنظیم تراز را در چنین حالتی نشان می دهد.
چگونه شیر را بگیریم؟
بهترین مقالات در این زمینه
