آموزش صفت align در css

بازدید: 374 بازدید
آموزش ترازبندی در css

صفت align ویژگی ترازبندی محتوا در صفحه وب سایت است.

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

در آموزش امروز قصد داریم نحوه کار با این صفت را با هم مرور کنیم.

همراه ما باشید.

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

در آموزش امروز قصد داریم نحوه کار با صفت align را باهم مرور کنیم.

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

همچنین میتوانید تعیین کنید که عنصری حتی در وسط صفحه نیز تراز شود.

در ادامه همراه ما باشید.

 

تراز وسط عناصر

برای اینکه یک عنصر بلوک block دارای تراز وسط باشد ،باید از گزینه margin:auto استفاده کنید.

تنظیم کردن عرض width برای یک عنصر مانع از آن می شود که عنصر از لبه های نگهدارنده خود خارج شود(overflow). یا اینکه به اندازه لبه های نگهدارنده کشیده شود.

با مقداردهی به width، عنصر عرض تعیین شده را می گیرد. و سپس فضای باقیمانده از چپ و راست، به طور مساوی در دوطرف، تقسیم می شود.
مثال:
[php]
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
[/php]

نتیجه را ببینید.

یک نکته مهم

اگر width تنظیم نشود و یا روی 100% تنظیم شده باشد، تراز کردن متن هیچ تاثیری ندارد.

تراز وسط متن

برای تراز کردن متن در وسط یک عنصر باید از text-align: center; استفاده کنید.

مثال:

[php]
.center {
text-align: center;
border: 3px solid green;
}
[/php]

نتیجه را ببنید.

برای مشاهده مثال ها و تمرینات بیشتر میتواندی به آموزش متن در css مراجعه کنید.

تراز وسط تصویر

برای ترازبندی وسط یک تصویر، اندازه margin  را از چپ و راست، روی autoتنظیم کنید. و همچنین انرا در یک عنصر بلوک block قرار دهید.

[php]
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
[/php]

نتیجه را ببنید.

تراز بندی چپ و راست با استفاده از position

یک روش تراز بندی برای عناصر، استفاده از position: absolute; است.

(برای مطالعه بیشتر درباره POSITION) به این لیتک مراجعه کنید.

مثال:

[php]
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
[/php]

نتیجه را ببینید.

 یک نکته مهم

عناصری که با position: absolute; مقداردهی شده اند، میتوانند با عناصر دیگر ترکیب شده و یا تداخل داشته باشند.

ترازبندی چپ و راست با استفاده از float

روشی دیگر برای ترازبندی عناصر استفاده از float است.

برای مطالعه بیشتر در مورد FLOAT به این لینک مراجعه کنید.

مثال:

[php]
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
[/php]
نتیجه را ببینید.

یک نکته مهم

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

برای مطالعه بیشتر در مورد برش وضوح clearfix hack به این لینک مراجعه کنید.

بعد از استفاده از این ویژگی، حالا میتوانید overflow: auto; را برای عنصر نگهدارنده فعال کنید. و مشکل حل می شود!

برای مطالعه بیشتر در مورد OVERFLOW به این لینک مراجعه کنید.

مثال:

[php]
.clearfix {
overflow: auto;
}
[/php]
نتیجه را ببینید.

مرکزیت عمودی با استفاده از padding

برای اینکه یک عنصر در مرکز غمودی یک نگهدارنده باشد، روش های زیادی در css وجود دارد.

یکی از ساده ترین روش ها استفاده از padding است.

برای مطالعه بیشتر در مورد padding میتوانید به این لینک مراجعه کنید.

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

مثال:

[php]
.center {
padding: 70px 0;
border: 3px solid green;
}
[/php]

نتیجه را ببینید.

برای اینکه المان، هم به صورت عمودی، و هم به صورت افقی در مرکز عنصر نگهدارنده باشد، از کد زیر استفاده کنید:
[php]
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
[/php]

نتیجه را ببینید.

مرکزیت عمودی با تنظیم ارتفاع

یک ترفند یگر استفاده از خاصیت line-height با یک مقدار برابر با ارتفاع است.

مثال:

[php]
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
[/php]

نتیجه را ببینید.

مرکزیت عمودی با استفاده از position و transform 

اگر  padding و line-height گزینه های مورد نظر شما نبود؛ نگران نباشید!

css قدرتمند یک راه حل سوم نیز برای شما در نظر دارد.

این راه حل استفاده از padding و transform است.

مقال زیر، روش کار را به شما نشان می دهد:

[php]
.center {
height: 200px;
position: relative;
border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
[/php]
نتیجه را مشاهده کنید.

خودتان را با یک امتحان، محک بزنید1
خودتان را با یک امتحان محک بزنید.2

 

 

میخواهم درباره align بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.