ترازبندی چیست؟
Align در لغت به معنی «تراز کردن» یا «ترازبندی» است. احتمالا با خودتان می گویید مگر چند تا از این خصوصیت ها داریم؟ در واقع زبان CSS پر است از خصوصیت هایی که مربوط به تعیین موقعیت و ترازبندی عناصر هستند و از آن جا که برخی از این روش ها برای برخی از موقعیت ها جواب نمیدهند، سعی کرده ام که چندین روش مختلف برای ترازبندی عمودی و افقی را به شما معرفی کنم.
هر کدام از این روش ها ممکن است در شرایط خاصی کار کند اما در شرایط دیگری جواب ندهد به همین دلیل آشنایی با آن ها می تواند کمک بسیار بزرگی به شما بکند.
استفاده از margin
اگر می خواهید عنصر خاصی را (مثلا یک عنصر <div>) در وسط صفحه قرار دهید باید از ;margin: auto استفاده کنید اما ممکن است عنصرتان به دو طرف صفحه کشیده شود. برای جلوگیری از این خطا باید عرض عنصرتان را دقیقا تعریف کنید.
در مثال زیر پس از تعیین عرض عنصر آن را در وسط صفحه قرار داده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.center {
margin:auto;
width:60%;
border:3pxsolid#73AD21;
padding:10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>Tohorizontally centerablock element(like div),usemargin:auto;</p>
<div dir='rtl'class="center">
<p><b>هشدار:</b>استفادهازایندستوردرمرورگرinternet explorer8ونسخههایقبلترتاثیرینداردمگراینکهDOCTYPEمربوطبهHTML5راتعریفکردهباشید.</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: اگر مقدار width تعیین نشده باشد یا آن را روی 100 درصد گذاشته باشید، دستور ;margin: auto هیچ تاثیری نخواهد داشت.
سوال: اگر عنصر ما از نوع inline بود چطور؟
پاسخ: بله روی عناصر inline نمی توان عرض مشخصی تعیین کرد. برای این کار می توانید عنصرتان را تبدیل به Block کنید و یا از inline-block استفاده کنید!
display: inline-block چیست؟
تفاوت عناصری که inline هستند با عناصری که inline-block هستند در یک مسئله ی مهم است؛ عناصر inline-block ترکیبی از مزایای دو حالت block و inline هستند بنابراین می توانند در عین حالی که inline هستند، عرض نیز بگیرند! همچنین می دانید که در عناصر inline به margin ها و padding های مربوط به top و bottom اهمیت داده نمی شود چرا که هیچ تاثیری ندارند اما در عناصر inline-block کاملا فعال هستند.
از طرفی دیگر نیازی نیست نگران اشغال کل صفحه توسط عناصر block باشید چرا که inline-block ها مانند block ها تمام عرض صفحه را نمی گیرند و به خط بعدی نیز نمی روند. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPEhtml>
<html>
<head>
<style>
span.a {
display:inline;/* the default for span */
width:100px;
height:100px;
padding:5px;
border:1pxsolidblue;
background-color:yellow;
}
span.b {
display:inline-block;
width:100px;
height:100px;
padding:5px;
border:1pxsolidblue;
background-color:yellow;
}
span.c {
display:block;
width:100px;
height:100px;
padding:5px;
border:1pxsolidblue;
background-color:yellow;
}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display:inline</h2>
<div>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Vestibulum consequat scelerisque elit sit amet consequat.Aliquam erat volutpat.<span class="a">Aliquam</span><span class="a">venenatis</span>gravida nisl sit amet facilisis.Nullam cursus fermentum velit sed laoreet.</div>
<h2>display:inline-block</h2>
<div>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Vestibulum consequat scelerisque elit sit amet consequat.Aliquam erat volutpat.<span class="b">Aliquam</span><span class="b">venenatis</span>gravida nisl sit amet facilisis.Nullam cursus fermentum velit sed laoreet.</div>
<h2>display:block</h2>
<div>Lorem ipsum dolor sit amet,consectetur adipiscing elit.Vestibulum consequat scelerisque elit sit amet consequat.Aliquam erat volutpat.<span class="c">Aliquam</span><span class="c">venenatis</span>gravida nisl sit amet facilisis.Nullam cursus fermentum velit sed laoreet.</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال تفاوت رفتار سه دسته ی inline، block و inline-block را مشاهده می کنید.
ترازبندی متون
سوال: اگر بخواهیم یک متن را به وسط صفحه بیاوریم چطور؟
پاسخ: برای متن ها از خصوصیت دیگری به نام ;text-align: center استفاده می کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.center {
text-align:center;
border:3pxsolidgreen;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center">
<p>متنیکهمشاهدهمیکنیددروسطصفحهقرارگرفتهاست</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ترازبندی تصاویر
باید بدانید پروسه ی ترازبندی کمی برای عناصری مانند تصاویر متفاوت است. برای وسط قرار دادن تصاویر باید margin های راست و چپ را auto بگذارید و سپس خود تصویر را تبدیل به یک عنصر block کنید. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPEhtml>
<html>
<head>
<style>
img {
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>Tocenter an image,set left andright margin toauto,andmake it intoablock element.</p>
<img src="https://www.w3schools.com/css/paris.jpg"alt="Paris"style="width:40%">
</body>
</html>
|
مشاهده ی خروجی در JSBin
اینها روش های مختلفی برای وسط قرار دادن عناصر بود اما برای موقعیت دهی عناصر مختلف راه های دیگری نیز وجود دارد!
ترازبندی به راست و چپ با position ها
یکی از راه های ترازبندی عناصر استفاده از ;position: absolute است. به این مثال دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.right {
position:absolute;
right:0px;
width:300px;
border:3pxsolid#73AD21;
padding:10px;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<p>An example of how toright align elements with the position property:</p>
<div class="right">
<p>Inmy younger andmore vulnerable years my father gave me some advice thatI've been turning over inmy mind ever since.</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: ممکن است این روش ساده تر به نظر برسد اما اگر از قسمت های قبل یادتان باشد، عناصر Absolute از جریان کلی صفحه جدا می شوند و میتوانند روی دیگر عناصر قرار بگیرند. اگر از چنین حالتی خوشتان نمی آید از موقعیت Absolute استفاده نکنید.
ترازبندی با استفاده از خاصیت float
راه دیگر برای ترازبندی به سمت چپ و راست استفاده از خاصیت float است. مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.right {
float:right;
width:300px;
border:3pxsolid#73AD21;
padding:10px;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<p>An example of how toright align elements with the floatproperty:</p>
<div class="right">
<p>Inmy younger andmore vulnerable years my father gave me some advice thatI've been turning over inmy mind ever since.</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته مشکل float نیز این است که برخی عناصر از نگه دارنده شان بیرون می زنند:
مشکل معروف clearfix – در این مثال عنصر پدر یا نگه دارنده کوچک تر از عنصر فرزند است بنابراین عنصر فرزند از نگه دارنده اش بیرون می زند
در جلسه ی قبل در رابطه با این مشکل و راه حل آن صحبت کرده ایم بنابراین اگر هنوز جلسه ی قبل را مطالعه نکرده اید به آن مراجعه کنید.
ترازبندی عمودی با padding
یکی دیگر از راه های ترازبندی عناصر استفاده از padding می باشد. به طور مثال می توانیم بگوییم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.center {
padding:70px0;
border:3pxsolidgreen;
}
</style>
</head>
<body>
<h2>Center Vertically</h2>
<p>Inthisexample,we usethe padding propertytocenter the div element vertically:</p>
<div class="center">
<p>Iam vertically centered.</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
با تعیین padding بالا و پایین به اندازه ی یکسان 70 پیکسل می توانیم آن را در وسط عنصر نگه دارنده اش قرار دهیم! به همین سادگی!
حالا اگر بخواهیم آن را هم از جهت عمودی و هم از جهت افقی به سمت وسط تراز بندی کنیم باید قابلیت ;text-align: center را نیز اضافه کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.center {
padding:70px0;
border:3pxsolidgreen;
text-align:center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>Inthisexample,we usepadding andtext-align tocenter the div element vertically andhorizontally:</p>
<div class="center">
<p>Iam vertically andhorizontally centered.</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ترازبندی با line-height
یکی دیگر از روش های ترازبندی استفاده از line-height است. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.center {
line-height:200px;
height:200px;
border:3pxsolidgreen;
text-align:center;
}
.center p {
line-height:1.5;
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>Inthisexample,we usethe line-height propertywithavalue that isequal tothe height propertytocenter the div element:</p>
<div class="center">
<p>Iam vertically andhorizontally centered.</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شما می توانید با این کد ها بازی کنید تا متوجه تغییر آن ها بشوید.
استفاده از قابلیت transform
یکی دیگر از راه های ترازبندی استفاده از قابلیت transform است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.center {
height:200px;
position:relative;
border:3pxsolidgreen;
}
.center p {
margin:0;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>Inthisexample,we usepositioning andthe transform propertytovertically andhorizontally center the div element:</p>
<div class="center">
<p>Iam vertically andhorizontally centered.</p>
</div>
<pdir='rtl'>هشدار:اینقابلیتدرمرورگرinternet explorer8ونسخههایقبلترآنکارنمیکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
transform خصوصیتی است که می تواند عناصر را از نظر ظاهری تغییر دهد. این تغییر ظاهری می تواند چرخاندن عنصر، بزرگ یا کوچک تر کردن عنصر، حرکت دادن عنصر و … باشد. حالت های مختلف کار با آن بسیار زیاد است بنابراین در این مقاله نمیگنجد اما یک مثال ساده از آن را برایتان آورده ام:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#div1
{
width:120px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
transform:rotate(7deg);
-ms-transform:rotate(7deg);/* IE 9 */
-webkit-transform:rotate(7deg);/* Safari 3-8 */
}
</style>
<script>
functionrotate(value)
{
document.getElementById('div1').style.webkitTransform="rotate("+value+"deg)";
document.getElementById('div1').style.msTransform="rotate("+value+"deg)";
document.getElementById('div1').style.MozTransform="rotate("+value+"deg)";
document.getElementById('div1').style.OTransform="rotate("+value+"deg)";
document.getElementById('div1').style.transform="rotate("+value+"deg)";
document.getElementById('span1').innerHTML=value+"deg";
}
</script>
</head>
<body>
<h1>The transform Property</h1>
<p>Rotate the yellow div element:</p>
<div id="div1">HELLO</div>
Rotate:<br>
<input type="range"min="-360"max="360"value="7"onchange="rotate(this.value)"/><br>
transform:rotate(<span id="span1">7deg</span>);
</body>
</html>
|
مشاهده ی خروجی در JSBin
با حرکت دادن slider می توانید مربع را rotate کنید، یعنی بچرخانید. در مورد این خاصیت در فصل های بعدی صحبت خواهیم کرد. به هر حال امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟