ترازبندی CSS

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

تراز افقی CSS

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

عناصر درون خطی و متن ساده ترین ترازها هستند. با استفاده از ویژگی text-align می توانید این کار را انجام دهید:

.center{     
  text-align: center;
  border: 4px solid black;
}

این ویژگی می تواند یکی از شش مقدار ممکن را بدست آورد:

Description	Syntax	Value
مقدار پیش فرض CSS را به عنصر موجود در محفظه تبدیل می کند	;text-align: center	center
باعث می شود CSS عنصر را در سمت چپ ظرف تراز کند	;text-align: left	left
باعث می شود CSS عنصر را در سمت راست ظرف تراز کند	;text-align: right	right
فضای CSS را برای پر کردن ظرف از لبه به لبه در می آورد	;text-align: justify	justify
وقتی جهت نوشتار از چپ به راست است ، مانند چپ کار می کند و وقتی راست به چپ است مانند درست است	;text-align: start	start
وقتی جهت نوشتار از چپ به راست است درست مانند راست و از راست به چپ مانند چپ عمل می کند	;text-align: end	end

استفاده از حاشیه برای عناصر بلوک

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

.center{     
  margin: auto;
  padding: 15px;     
  border: 4px solid black;
  width: 88%; 
}

توجه: برای کار با این ، یک عنصر باید یک عرض مشخص داشته باشد.

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

img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 60%;
}

نکته: برای قرار دادن چندین عنصر بلوک در یک ردیف ، ویژگی نمایش را با مقدار تنظیم شده خود به بلوک درون خطی اعمال کنید.

تغییر موقعیت

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

.left{       
  left: 15px;
  position: absolute;   
  border: 4px solid black;
  padding: 15px;   
  width: 550px;
}

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

ساخت عناصر شناور

با استفاده از ویژگی float می توانید عناصر را تراز کنید:

 .left {
    float: left;
    border: 4px solid black;
    padding: 15px;
    width: 550px;
}

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

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

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

.clearfix {
    overflow: auto;
}

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

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

از روش ترازبندی عمودی CSS می توان برای عناصر خطی استفاده کرد:

img.first {
    vertical-align: baseline;
}

img.second {
    vertical-align: text-top;
}

img.third {
    vertical-align: text-bottom;
}

img.fourth {
    vertical-align: sub;
}

img.fifth {
    vertical-align: super;
}

توجه: vertical-align روی سلولهای جدول و عناصری که خاصیت نمایش آنها روی table-cell تنظیم شده است نیز کار خواهد کرد.

مرکز با پدینگ

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

.center {
    padding: 30px 0;
    border: 4px solid black;
}

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

توجه: مطمئن شوید که بالشتک سمت راست و چپ را 0px تعریف کنید: اگر فقط یک مقدار برای padding مشخص کنید ، CSS از آن برای چهار طرف عنصر استفاده می کند.

برای قرار دادن متن به صورت عمودی و افقی ، می توانید padding را با text-align ترکیب کنید: center:

.center {
    padding: 30px 0;
    border: 4px solid black;
    text-align: center;
}

ترازبندی CSS با ارتفاع خط

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

.center {
    border: 4px solid black;
    text-align: center;
    line-height: 100px;
    height: 100px;
}

/* Add the following in case the text has more than one line: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

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

ترکیب موقعیت و تبدیل

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

.center {
    border: 4px solid black;
    height: 100px;
    position: relative;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

نکات مهم ترازبندی CSS:

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

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.