ترتیب، در زمینه طراحی وب و CSS، به موقعیت و ترتیب المان‌ها یا محتوا در یک طرح اشاره دارد، معمولاً با توجه به نقاط مرجع یا راهنماهای خاص. ترتیب برای ایجاد طراحی‌های زیبا و منظم با اطمینان از اینکه المان‌ها به یکدیگر یا به ساختار طرح به صورت یکنواخت و هماهنگ قرار می‌گیرند، استفاده می‌شود.
ترتیب می‌تواند برای انواع مختلفی از المان‌ها، از جمله متن، تصاویر، دکمه‌ها و غیره، برای ایجاد یک طراحی یکپارچه و با کیفیت استفاده شود. CSS ویژگی‌های مختلفی را فراهم می‌کند که برای ترتیب المان‌ها مورد استفاده قرار می‌گیرد.
دو جنبه اصلی ترتیب عبارتند از:
-
ترتیب افقی: این به موقعیت المان‌ها در امتداد محور افقی اشاره دارد که معمولاً از چپ به راست است. گزینه‌های متداول ترتیب افقی عبارتند از:
- ترتیب از چپ: المان‌ها به سمت چپ یک ظرف یا طرح ترتیب داده می‌شوند.
- ترتیب مرکز: المان‌ها به صورت مرکزی در افقی یک ظرف یا طرح قرار می‌گیرند.
- ترتیب از راست: المان‌ها به سمت راست یک ظرف یا طرح ترتیب داده می‌شوند.
-
ترتیب عمودی: این به موقعیت المان‌ها در امتداد محور عمودی اشاره دارد که معمولاً از بالا به پایین است. گزینه‌های متداول ترتیب عمودی عبارتند از:
- ترتیب از بالا: المان‌ها به سمت بالای یک ظرف یا طرح ترتیب داده می‌شوند.
- ترتیب میانه یا مرکز: المان‌ها به صورت مرکزی در عمودی یک ظرف یا طرح قرار می‌گیرند.
- ترتیب از پایین: المان‌ها به سمت پایین یک ظرف یا طرح ترتیب داده می‌شوند.
position Property
در این بخش، روش‌های مختلفی برای تنظیم چیدمان یک المان به چپ با استفاده از ویژگی position در CSS آورده شده است.
ویژگی position به شما امکان می‌دهد تا موقعیت المان‌ها را تنظیم کنید. در اینجا نمونه‌ای از تنظیم چیدمان با استفاده از position آورده شده است:
- .right-alignment: در این قسمت، المان به راست چیده شده است. با استفاده از position: absolute و تنظیم right: 0px، المان به سمت راست صفحه منتقل می‌شود.
- .left-alignment: در این قسمت، المان به چپ چیده شده است. با استفاده از position: relative و تنظیم left: 0px، المان به سمت چپ صفحه منتقل می‌شود.
- .center-alignment: در این قسمت، المان در مرکز قرار گرفته است. با استفاده از margin: auto و position: relative، المان عمودی و افقی در مرکز قرار می‌گیرد.
مهم بودن توجه به این نکته است که المان‌های با position: absolute از جریان عادی صفحه حذف می‌شوند و ممکن است با المان‌های دیگر همپوشانی داشته باشند.
<html>
<head>
<style>
.right-alignment {
position: absolute;
right: 0px;
width: 100px;
border: 3px solid #0d1601;
background-color: rgb(244, 244, 135);
padding: 10px;
}
.left-alignment {
position: relative;
left: 0px;
width: 100px;
border: 3px solid #0c1401;
background-color: blanchedalmond;
padding: 10px;
}
.center-alignment {
margin: auto;
border: 3px solid black;
padding: 5px;
background-color: rgb(241, 97, 126);
width: 120px;
position: relative;
}
</style>
</head>
<body>
<div class="right-alignment">
<h3>Right align</h3>
<strong>Right align with position:absolute</strong>
</div>
<div class="left-alignment">
<h3>Left align</h3>
<strong>Left align with position:relative</strong>
</div>
<div class="center-alignment">
<h3>Center align</h3>
<strong>Vertically & horizontally centered using position:relative and margin:auto.</strong>
</div>
</body>
</html>float Property
در این بخش، از ویژگی float در CSS برای تنظیم چیدمان المان‌ها استفاده شده است.
ویژگی float به شما امکان می‌دهد تا المان‌ها را به سمت راست یا چپ فرستاده یا به مقداری از جریان عادی صفحه خارج کنید.
در مثال زیر، چیدمان المان‌ها با استفاده از float تنظیم شده است:
- .right-alignment: المان به سمت راست چیده شده است. با استفاده از float: right، المان به سمت راست صفحه منتقل می‌شود.
- .left-alignment: المان به سمت چپ چیده شده است. با استفاده از float: left، المان به سمت چپ صفحه منتقل می‌شود.
استفاده از float به شما امکان می‌دهد تا المان‌ها را به طرزی مطلوب در چیدمان صفحه خود قرار دهید، اما باید توجه داشت که با استفاده از float ممکن است برخی مشکلات در چیدمان صفحه به وجود آید، مانند مشکلات با المان‌های پس‌زمینه یا همپوشانی با المان‌های دیگر.
<html>
<head>
<style>
.right-alignment {
float: right;
width: 100px;
border: 3px solid #0d1601;
background-color: rgb(244, 244, 135);
padding: 10px;
}
.left-alignment {
float: left;
left: 0px;
width: 100px;
border: 3px solid #0c1401;
background-color: blanchedalmond;
padding: 10px;
}
</style>
</head>
<body>
<div class="right-alignment">
<h3>Right align</h3>
<strong>Right align with float:right</strong>
</div>
<div class="left-alignment">
<h3>Left align</h3>
<strong>Left align with float:left</strong>
</div>
</body>
</html>text-align Property
در این بخش از ویژگی text-align در CSS برای تنظیم تراز متن داخل یک المان استفاده شده است.
ویژگی text-align به شما امکان می‌دهد تا متن داخل یک المان را به چپ، راست یا وسط چین کنید.
در مثال زیر، تراز متن داخل المان‌ها با استفاده از text-align تنظیم شده است:
- .right-alignment: متن به سمت راست چیده شده است. با استفاده از text-align: right، متن داخل المان به سمت راست چین می‌شود.
- .left-alignment: متن به سمت چپ چیده شده است. با استفاده از text-align: left، متن داخل المان به سمت چپ چین می‌شود.
- .center-alignment: متن به وسط چیده شده است. با استفاده از text-align: center، متن داخل المان در وسط چین می‌شود.
استفاده از این ویژگی به شما امکان می‌دهد تا متن داخل المان‌ها را به دلخواه خود تراز کنید و ظاهر زیبایی برای صفحه خود ایجاد کنید.
<html>
<head>
<style>
div {
width: 300px;
border: 3px solid #0d1601;
padding: 10px;
margin-bottom: 1cm;
}
.right-alignment {
text-align: right;
color:red;
}
.left-alignment {
text-align:left;
color:green;
}
.center-alignment {
text-align: center;
color:blue;
}
</style>
</head>
<body>
<div class="right-alignment">
<h3>Right align</h3>
<strong>Text right aligned</strong>
</div>
<div class="left-alignment">
<h3>Left align</h3>
<strong>Text left aligned</strong>
</div>
<div class="center-alignment">
<h3>Center align</h3>
<strong>Text center aligned</strong>
</div>
</body>
</html>padding Property
در این بخش از ویژگی padding در CSS برای تنظیم تراز عمودی یک متن استفاده شده است.
ویژگی padding به شما امکان می‌دهد تا فضای پیرامون محتوای داخلی یک المان را تعیین کنید. با تنظیم مقادیر padding برای یک المان، می‌توانید فاصله بین محتوا و مرزهای داخلی آن المان را تنظیم کنید.
در مثال زیر، برای تنظیم تراز عمودی متن داخل یک <div> از ویژگی padding استفاده شده است:
- .center-alignment: با استفاده از padding به شکل
padding: 100px 0;، فضای پیرامون متن داخلی<div>به اندازه 100 پیکسل برای بالا و پایین و صفر برای چپ و راست تنظیم شده است. این باعث می‌شود متن داخل<div>عموداً در مرکز قرار بگیرد.
همچنین در این مثال، ویژگی‌های border، margin و background-color نیز برای زیبایی بیشتر اضافه شده‌اند.
<html>
<head>
<style>
.center-alignment {
padding: 100px 0;
border: 3px solid black;
margin: 5px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="center-alignment">
<p>Vertically centerd using padding.</p>
</div>
</body>
</html>Center Text
در این بخش از CSS، برای تنظیم تراز عمودی و افقی متن در وسط صفحه از ویژگی‌های padding و text-align استفاده شده است.
- .center-alignment: با تنظیم padding به شکل
padding: 100px 0;، فضای پیرامون محتوا به اندازه 100 پیکسل برای بالا و پایین و صفر برای چپ و راست تنظیم شده است. همچنین با استفاده از text-align به شکلtext-align: center;، متن داخلی درون<div>در مرکز افقی قرار می‌گیرد.
این ترکیب از ویژگی‌های padding و text-align امکان می‌دهد تا متن به‌طور همزمان در مرکز افقی و عمودی قرار گیرد، که در نتیجه متن به صورت مرکزی در میان <div> نمایش داده می‌شود.
<html>
<head>
<style>
.center-alignment {
padding: 100px 0;
text-align: center;
border: 3px solid black;
margin: 5px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="center-alignment">
<p>Vertically & horizontally centerd using padding and text-align properties.</p>
</div>
</body>
</html>justify-content Property
در این بخش از CSS، برای تنظیم تراز عمودی و افقی متن در وسط صفحه از ویژگی‌های flex و justify-content استفاده شده است.
- .center-alignment: با تنظیم display به شکل
display: flex;، عنصر مورد نظر را به یک مراکز قابل فرمان تبدیل می‌کنیم. سپس با استفاده از justify-content به شکلjustify-content: center;، موقعیت عناصر را در محور افقی (از چپ به راست) در مرکز قرار می‌دهیم. همچنین با align-items به شکلalign-items: center;، موقعیت عناصر را در محور عمودی (بالا به پایین) نیز در مرکز قرار می‌دهیم.
این ترکیب از ویژگی‌های flex و justify-content امکان می‌دهد تا متن به‌طور همزمان در مرکز افقی و عمودی قرار گیرد، که در نتیجه متن به صورت مرکزی در میان <div> نمایش داده می‌شود.
<html>
<head>
<style>
.center-alignment {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 3px solid black;
font-size: larger;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="center-alignment">
<p>Vertically & horizontally centered using flex and justify-content.</p>
</div>
</body>
</html>Related Properties
این جدول توضیحات مربوط به ویژگی‌های مرتبط با تراز در CSS را فهرست می‌کند:
| ویژگی | توضیح |
|---|---|
| align-content | محتوای یک کانتینر flex را در امتداد محور عرضی یا محور بلوک یک شبکه قرار می‌دهد. |
| align-items | کنترل تراز عناصر یک کانتینر flex در امتداد محور عرضی. |
| align-self | کنترل تراز یک عنصر فردی در داخل یک کانتینر. |
| vertical-align | تعیین تراز عمودی متنهای درونی، inline-block یا سلول‌های جدول. |
| line-height | تعیین فاصله بین خطوط متن. |
| text-align | تنظیم تراز افقی متنهای inline، inline-block یا سلول‌های جدول. |
| margin | اختصاری برای ارزش‌های حاشیه که می‌تواند تراز را تغییر دهد. |
این ویژگی‌ها به طریق‌های مختلفی برای کنترل تراز و تنظیمات ظاهری در CSS استفاده می‌شوند، که امکان می‌دهند عناصر و متن‌ها به دقت و هماهنگی مورد نظر در یک طراحی وب قرار گیرند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام