Layout - تراز افقی و عمودی
محتویات
- ۱ عناصر وسط چین
- ۲ متن وسط چین
- ۳ قرار دادن یک تصویر در وسط
- ۴ تراز چپ و راست - با استفاده از position
- ۵ تراز چپ و راست چین - با استفاده از float
- ۶ استفاده از clearfix Hack
- ۷ وسط چین در جهت عمودی - با استفاده از padding
- ۸ وسط چین کردن عمودی - با استفاده از line-height
- ۹ وسط چین عمودی - با استفاده از position و transform
- ۱۰ وسط چین عمودی - با استفاده از Flexbox
- ۱۱ خودتان را با تمرینها آزمایش کنید!
- ۱۲ منابع آموزشی
عناصر وسط چین
برای وسط چین کردن یک عنصر (مانند <div>)، از margin: auto;
استفاده کنید.[۱]
تنظیم عرض عنصر موجب جلوگیری از کشیده شدن آن تا لبههای عنصر نگهدارنده میشود.
بنابراین عنصر، اندازه عرض مشخص شده را اشغال میکند، و فضای باقیمانده بهطور مساوی بین حاشیه دو طرف تقسیم میشود.
این عصر div وسط چین شدهاست.
نکته: اگر ویژگی width
تنظیم نشده باشد (یا روی ۱۰۰٪ تنظیم شده باشد) وسط چین کردن آن تأثیری ندارد.
متن وسط چین
برای فقط وسط چین کردن متن در داخل یک عنصر از text-align: center;
استفاده کنید.
این متن وسط چین شدهاست.
نکته: برای مشاهده مثالهای بیشتر در مورد نحوه تراز بندی متن، فصل متن در CSS را ببینید.
قرار دادن یک تصویر در وسط
برای قراردادن یک تصویر در وسط، حاشیه چپ و راست را روی auto
تنظیم کنید و آن را درون یک عنصر block
قرار دهید:
تراز چپ و راست - با استفاده از position
یک روش برای تراز بندی عناصر استفاده از position: absolute;
است:
در سالهای جوانی و سالهایی که آسیبپذیر تر بودم، پدرم توصیههایی را به من کرد که از آن زمان به بعد ذهنیتم را عوض کردهام.
نکته: عنصرهایی که به صورت absolute موقعیت دهی شدهاند از جریان عادی پاک میشوند، و میتوانند با عناصر همپوشانی داشته باشند.
تراز چپ و راست چین - با استفاده از float
روش دیگری برای ترازبندی عناصر استفاده از ویژگی float
است:
نکته: اگر یک عنصر از عنصری که درون آن قرار دارد بزرگتر باشد، و float شده باشد، از عنصر نگهدارنده خود سرریز خواهد شد. میتوانید از هک "clearfix" برای حل این مشکل استفاده کنید. (مثال زیر را ببینید)
استفاده از clearfix Hack
بنابراین میتوانیم overflow: auto;
را به عنصر نگهدارنده اضافه کنیم تا این مشکل را رفع کنیم:
وسط چین در جهت عمودی - با استفاده از padding
راههای زیادی برای وسط چین کردن یک عنصر به لحاظ عمودی در CSS وجود دارد. یک راه حل ساده استفاده از padding
بالا و پایین است:
من به صورت عمودی وسط چین شدهام.
برای وسط چین کردن هم به صورت عمودی و هم به صورت افقی، از padding
و text-align: center
استفاده کنید:
من به صورت عمودی و افقی وسط چین شدهام.
وسط چین کردن عمودی - با استفاده از line-height
راه حل بعدی استفاده از ویژگی line-height
با مقداری برابر با مقدار ویژگی height
است.
من به صورت عمودی و افقی وسط چین شدهام.
وسط چین عمودی - با استفاده از position و transform
اگر padding
و line-height
جزء گزینهها نباشند، راه حل دیگر استفاده از موقعیت دهی (به انگلیسی: positioning)، و ویژگی transform
است:
من به صورت عمودی و افقی وسط چین شدهام.
نکته: می توانید مطالب بیشتری را در مورد ویژگی transform در فصل 2D Transforms بیاموزید.
وسط چین عمودی - با استفاده از Flexbox
همچنین میتوانید از Flexbox برای وسط چین کردن عمودی این موارد استفاده کنید. فقط توجه داشته باشید که flexbox در IE10، و نسخههای قدیمیتر پشتیبانی نمیشود:
من از نظر عمودی و افقی در وسط هستم.
نکته: در بخش CSS Flexbox ما اطلاعات بیشتری در مورد Flexbox کسب خواهید کرد.
خودتان را با تمرینها آزمایش کنید!
منابع آموزشی