جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانراهنمای کامل ترازبندی متن ها در CSS

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

10 مهر 1400
ارسال شده توسط همیار من
دوره های رایگان
347 بازدید
css

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

فهرست عناوین

  • ترازبندی متن ها در CSS
  • انواع ترازبندی در CSS
  • ترازبندی بصورت افقی یا Horizontal
  • قرار دادن عناصر در وسط صفحه با استفاده از ویژگی Margin
  • قرار دادن تصویر / عکس در وسط صفحه بصورت افقی
  • قرار دادن عناصر در وسط صفحه با استفاده از ویژگی Position و transform
  • قرار دادن عناصر در سمت راست یا چپ با استفاده از ویژگی float
  • سرریز شدن یا Overflow شدن یک عنصر + راه حل این مشکل
  • ترازبندی بصورت عمودی یا Vertical
  • قرار دادن متن بصورت عمودی در وسط ، استفاده از ویژگی Padding
  • قرار دادن متن بصورت عمودی در وسط ، استفاده از ویژگی line-height

ترازبندی متن ها یا Alignment یعنی موقعیت قرار گیری یک متن یا عنصر در یک صفحه وب ، یعنی اینکه مثلا یک متن در وسط صفحه قرار بگیرد یا مثلا در سمت راست. (ترازبندی بصورت افقی)

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

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

پس همه اینکارارو میتونیم با استفاده از ترازبندی در CSS انجام دهیم، که در ادامه و تا پایان این جلسه میخوایم بطور کامل با انواع روش های ترازبندی در CSS آشنا شویم.

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

ما بطور کلی ۲ نوع تراز بندی میتونیم داشته باشیم :

  • ترازبندی بصورت افقی یا Horizontal
  • ترازبندی بصورت عمودی یا Vertical

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

ترازبندی بصورت افقی یا Horizontal

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

ترازبندی متن بصورت افقی

در این حالت ما میخوایم یک متن را بصورت افقی در وسط صفحه قرار دهیم، در CSS با استفاده از ویژگی text-align به راحتی میتونیم اینکارو انجام دهیم.

مثال شماره ۱ : قرار دادن متن در وسط یک عنصر ( استفاده در تگ Div )

1
2
3
4
5
6
7
<style>
 
div{
text-align:center;
}
 
</style>

 

مثال شماره ۲ : قرار دادن تمامی متن های موجود در صفحه، در وسط صفحه ( استفاده در تگ body )

1
2
3
4
5
6
7
<style>
 
body{
text-align:center;
}
 
</style>

ترازبندی عناصر بصورت افقی

در این حالت ما میخوایم عناصر ( مثلا تگ Div ) رو بیاریم و در وسط صفحه قرار دهیم، دیگه نمیتونیم از ویژگی text-align استفاده کنیم چرا که این ویژگی فقط بروی متن ها عمل میکند.

پس عملا دیگه نمیشه با استفاده از ویژگی text-align یک باکس ( که از طریق مثلا تگ div ایجاد شده ) را در وسط صفحه قرار داد، پس باید از روش ها یا ترفندهای دیگه ای استفاده کنیم.

قرار دادن عناصر در وسط صفحه با استفاده از ویژگی Margin

در این روش از ترازبندی متن ها در CSS ما با استفاده از ویژگی Margin میتونیم یک عنصر (مثله تگ div) رو بیاریم و در وسط صفحه قرار دهیم.

مثال : در این مثال خوده باکس (div) میاد و در وسط صفحه قرار میگیرد نه متن درون باکس

1
2
3
4
5
6
7
8
9
10
11
<style>
 
div{
margin:auto;
background-color:#d51c00;
color:#fff;
padding:5px;
width:40%;
}
 
</style>

 

قرار دادن تصویر / عکس در وسط صفحه بصورت افقی

ما بصورت پیش فرض نمیتونیم یک عکس رو در وسط صفحه قرار بدیم، یعنی مثلا با استفاده از ویژگی text-align نمیتونیم یک عکس رو در وسط صفحه قرار بدیم.

خب چرا؟ چون حالت نمایش تصاویر در HTML بصورت پیش فرض بصورت اینلاینی یا Inline یا درون خطی می باشد، یعنی اگه ۳ تصویر بزارید کنار هم هر۳تاش تو یه سطر قرار میگیرند.

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

ترفند شماره ۱ : قرار دادن تصویر در وسط صفحه با قرار دادن اون تصویر در درون تگ div : یعنی ما تصویرمون رو میزاریم درون تگ div یا هرتگ بلاکی دیگر، سپس میتونیم از ویژگی text-align استفاده نماییم.

1
2
3
4
5
6
7
<style>
 
div{
text-align:center;
}
 
</style>

 

ترفند شماره ۲ : قرار دادن تصویر در وسط صفحه با استفاده از ویژگی margin و display

1
2
3
4
5
6
7
8
<style>
 
img{
display:block;
margin:auto;
}
 
</style>

 

قرار دادن عناصر در وسط صفحه با استفاده از ویژگی Position و transform

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

مثال : با ویژگی transform و position عنصر دقیقا در وسط صفحه قرار میگیرد.

1
2
3
4
5
6
7
8
9
10
11
<style>
 
div{
position: absolute;
right: 50%;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>

قرار دادن عناصر در سمت راست یا چپ با استفاده از ویژگی float

ویژگی float ویژگی است که با استفاده از آن میتوان مشخص کرد که یک عنصر بصورت شناور در سمت راست یا چپ صفحه قرار بگیرد.

مثال :

1
2
3
4
5
6
7
<style>
 
div{
float: right;
}
</style>

 

سرریز شدن یا Overflow شدن یک عنصر + راه حل این مشکل

خب یعنی چی سرریز شدن یک عنصر ؟! وقتی مثلا من یک عکس رو درون یک عنصر Div قرار بدم و همان عکس اندازش به گونه ای باشد که از عنصر div بزند بیرون (یعنی اندازه عکس از اندازه div بیشتر باشد) ، در اینصورت عمل سرریز شکل میگیرد.

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

مثال شماره ۱ : در این مثال عمل سرریز شدن را نشان میدهد.

1
2
3
4
5
6
7
8
9
10
11
<style>
 
div{
border:2px solid #1d7ce7;
}
 
div img{
float:right;
}
</style>

مثال شماره ۲ : رفع مشکل سرریز شدن با استفاده از ویژگی overflow – (ممکن است در برخی موارد کار نکند)

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
 
div{
border:2px solid #1d7ce7;
overflow:auto;
padding:10px;
}
 
div img{
float:right;
}
</style>

 

مثال شماره ۳ : رفع مشکل سرریز شدن با استفاده از هک clearfix – ( برای اکثر مرورگرهای مدرن تعریف شده و استفاده از این هک پیشنهاد می شود )

1
2
3
4
5
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

 

ترازبندی بصورت عمودی یا Vertical

خب در روش های بالا ما یاد گرفتیم که چگونه میتوانیم عناصر را بصورت افقی ترازبندی کنیم ( در سمت راست یا وسط و یا چپ قرار دادن )، حال در این قسمت از ترازبندی متن ها در CSS میخواهیم یاد بگیریم که چگونه میتوان عناصر را بصورت عمودی ترازبندی کرد.

قرار دادن متن بصورت عمودی در وسط ، استفاده از ویژگی Padding

مثال :

1
2
3
4
5
6
7
8
<style>
 
div{
border:2px solid #1d7ce7;
padding:30px 0;
}
</style>

 

قرار دادن متن بصورت عمودی در وسط ، استفاده از ویژگی line-height

مثال : توجه داشته باشید که در این روش باید مقدار ویژگی line-height با مقدار ویژگی height یکسان باشد.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
 
div{
border: 2px solid #1d7ce7;
line-height: 100px;
height: 100px;
}
 
div p{
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
 
</style>

بیشتر بخوانیم:

  • آموزش کار با فایل Media Object در بوت‌استرپ 4
  • قالب بندی متون در HTML
  • راهنمای قرار دادن نقشه گوگل در سایت
  • آموزش کار با عناصر Block و Inline در CSS
  • آموزش کار با جداول در CSS

 

اشتراک گذاری:
برچسب ها: CSSآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش CSS مقدماتیآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش ترازبندی در CSSترازبندیترازبندی در CSS
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

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

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت