این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کامل ترازبندی متن ها در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل ترازبندی متن ها در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ترازبندی متن ها در CSS
ترازبندی متن ها یا Alignment دیگه خودتونم میدونید یعنی چی!؟ یعنی موقعیت قرار گیری یک متن ( یا هم مثلا خوده تگ ) در یک صفحه وب ، حالا این ترازبندی یا بصورت افقی هست یا هم بصورت عمودی
- ترازبندی بصورت افقی یا Horizontal
- ترازبندی بصورت عمودی یا Vertical
ما علاوه بر متن ها ، میتونیم خوده تگ هارو نیز ترازبندی کنیم، یعنی مثلا یک باکس رو بصورت افقی بیاریم در وسط صفحه و یا اصلا بخوایم یک عکس رو بیاریم در وسط صفحه قرار بدهیم و..
پس همه اینکارارو میتونیم با استفاده از ترازبندی در CSS انجام دهیم، که در ادامه و تا پایان این جلسه میخوایم بطور کامل با انواع روش های ترازبندی در CSS آشنا شویم.
Free-Learn
ترازبندی افقی متن ها در CSS
خیلی راحت با استفاده از ویژگی Text-align میتوان تراز افقی متن رو در صفحه مشخص کرد.
- left : سمت چپ
- center : در وسط
- right : سمت راست
مثال شماره ۱ : قرار دادن متن در سمت چپ ، وسط ، راست صفحه با استفاده از ویژگی text-align
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .m1{ text-align:left; } .m2{ text-align:center; } .m3{ text-align:right; } </style> |
مثال شماره ۲ : قرار دادن عکس در وسط صفحه با استفاده از ویژگی text-align
|
1 2 3 4 5 6 7 |
<style> .MyImage{ text-align:center; } </style> |
مثال شماره ۳ : قرار دادن کل محتوای داخل صفحه در وسط
|
1 2 3 4 5 6 7 |
<style> body{ text-align:center; } </style> |
Free-Learn
ترازبندی افقی تگ ها در CSS
خب در مثال های قبلی ما متن هامون رو مثلا در وسط صفحه قرار میدادیم، حالا میخوایم خوده تگ هامون رو در وسط صفحه قرار بدیم نه متن داخشون رو، پس عملا دیگه نمیشه از ویژگی text-align استفاده کرد، باید از روش های دیگه ای استفاده کنیم.
مثال شماره ۱ : وسط قرار دادن تگ ها با استفاده از ویژگی Margin
|
1 2 3 4 |
div{ width:200px; margin:auto; } |
مثال شماره ۲ : قرار دادن عکس در وسط صفحه با استفاده از ویژگی margin و display
|
1 2 3 4 5 6 7 8 |
<style> .MyImage{ display:block; margin:auto; } </style> |
مثال شماره ۳ : قرار دادن یک تگ ( باکس و.. ) بصورت افقی در وسط صفحه
|
1 2 3 4 |
transform: translate(-50%, -50%); position: absolute; right: 50%; left:50%; |
مثال شماره ۴ : قرار دادن یک تگ ( باکس و.. ) بصورت افقی و عمودی در وسط صفحه
|
1 2 3 4 5 6 |
transform: translate(-50%, -50%); position: absolute; right: 50%; left:50%; top:50%; bottom:50%; |
Free-Learn
ترازبندی عمودی متن ها در CSS
مثال شماره ۱ : قرار دادن متن در قسمت بالا ، وسط و پایین تگ ( بصورت عمودی )
|
1 2 3 |
div.box-1 p{ vertical-align:top; } |
مثال شماره ۲ : مشخص کردن تراز متن داخل سلول های جدول ( بصورت عمودی )
|
1 2 3 |
td{ vertical-align:bottom; } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : قرار دادن آیتم های فلکس باکس در وسط ظرف ( بصورت افقی عمودی دقیقا وسط ظرف )
|
1 2 3 4 5 |
.MyContainer{ height:250px; justify-content: center; align-items: center; } |
