جلسه ۲۶ – چپ، راست و وسط چینی عناصر متنی در CSS

چینش متن در CSS

چینش عناصر در CSS
چینش عناصر در CSS

در این مقاله، به پاسخ دادن به سوال های زیر می‌پردازیم:

    • منظور از چپ چین کردن متن چیست؟
    • چگونه متن را چپ چین کنیم ؟
    • منظور از راست چین کردن متن چیست؟
    • منظور از وسط چین کردن متن چیست؟
    • چگونه متن را تراز کنیم؟
    • چطور می‌تونیم متن رو در راستای افقی تراز کنیم؟

اول باید مفهوم تراز کردن رو متوجه بشیم. مسلما اگه با نرم افزارهای نگارشی کار کرده باشین، مثل microsoft word، با این قضیه آشنایی دارین!

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

مفهوم تراز کردن

فرض کنید داخل یه جعبه، یه جعبه کوچیک تر داریم.

جعبه کوچیک رو تو هرجایی از جعبه بزرگ می‌تونیم قرار بدیم.

برای مثال، در انتهای چپ جعبه:

چپ چین در CSSیا در وسط جعبه:

وسط چین در CSS
وسط چین در CSS

و یا در انتهای راست جعبه:

راست چین در CSS
راست چین در CSS

به زبان ساده، به این جابه جایی، تراز کردن می‌گیم.

حالا بیاید این مفهوم رو به CSS تعمیم بدیم.

ما می‌تونیم عناصر CSS رو داخل محدوده یا عنصر پدری که براشون تعریف کردیم، راست، چپ و وسط چین کنیم. اما قبل از پرداختن به این قضیه که چطور این کار رو باید انجام بدیم، باید متوجه باشیم که محدوده ی اشغالی هر عنصر، تا چه جایی پیش می‌ره.

این موضوع، کاملا بستگی به کد CSSای داره که برای عناصر پدر و فرزند می‌نویسیم.

به مثال زیر توجه کنین:

کد HTML:

<div>
   <p>Hello mizfa !</p>
</div>

کد CSS:

div{
   height: 200px; 
   width: 100px; 
}

نتیجه ای که مشاهده می‌کنیم به فرم زیره:

نمونه چینش متن در CSS
نمونه چینش متن در CSS

با توجه به نکته ای که گفتیم، محدوده عنصر پدر، یک محدوده ی کوچیک به ابعاد ۲۰۰ در ۱۰۰ پیکسل هست.

ما نمی‌تونیم در راستای این محدوده، عنصر فرزند یا p رو جا به جا کنیم، چون جای کافی وجود نداره.

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

کد CSS:

div{
   height: 200px;
   width: 500px;
   border: 1px solid black;
}

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

نتیجه به فرم زیر خواهد بود:

چپ چین به همراه Border
چپ چین به همراه Border

همونطور که می‌بینیم، با توجه به دستورات در کد CSS موردنظر، محدوده ی متن ما یک عنصر div با عرض ۵۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل هست.

حالا می‌‌تونیم عنصر مورد نظر رو در محدوده ای که براش آماده کردیم، جا به جا کنیم.

خاصیت text-align

مقادیری که خاصیت text-align قبول می‌کنه به شرح زیر هستن:

  • center
  • left
  • right
  • justify
  • start
  • end

وسط چین – Center

این مقدار، متن رو به وسط محدوده هدایت می‌کنه.

div{
   text-align: center;
}
وسط چین کردن متن در CSS
وسط چین کردن متن در CSS

چپ چین – Left

این مقدار، متن رو به سمت چپ محدوده هدایت می‌کنه.

div{
   text-align: left;
}
چپ چین کردن متن در CSS
چپ چین کردن متن در CSS

راست چین – right

این مقدار، متن رو به سمت راست محدوده هدایت می‌کنه.

div{
   text-align: right;
}
تنظیم موقعیت متن راست در CSS
تنظیم موقعیت متن راست در CSS

تراز کردن – justify

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

div{
   text-align: justify;
}
تنظیم موقعیت متن Justify در CSS
تنظیم موقعیت متن Justify در CSS

شروع خط – start

این مقدار، با توجه به جهتی که برای صفحه تدارک دیدیم ( direction )، محتوا رو از ابتدای محدوده عنصر پدر شروع می‌کنه. ( این بحث رو تو فصل های آینده بیشتر مرور می‌کنیم )

div{
   text-align: start;
}
تنظیم موقعیت متن Start در CSS
تنظیم موقعیت متن Start در CSS

پایان خط – end

این مقدار، با توجه به direction مربوطه، محتوا رو از انتهای محدوده عنصر پدر تولید می‌کنه.

div{
   text-align: end;
}
تنظیم موقعیت متن End در CSS
تنظیم موقعیت متن End در CSS

 

اگه مشکل یا ابهامی براتون پیش اومد، حتما تو بخش نظرات بپرسین. من پاسخگو هستم 🙂

اختصاص خاصیت text-align به عناصر فرزند

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

ما می‌تونیم خاصیت text-align رو مستقیما به عناصر مورد نظرمون هم نسبت بدیم و حتما لازم نیست به عنصر پدر نسبت داده بشه.

به مثال زیر توجه کنین:

کد HTML:

<div>
   <h1> Mizfa1 </h1> 
   <h2> Mizfa2 </h2> 
   <h3> Mizfa3 </h3> 
</div>

کد CSS:

div{
   width: 500px; 
   height: 270px; 
   border: 1px solid black; 
} 
div h1{ 
   text-align: left; 
} 
div h2{ 
   text-align: center; 
} 
div h3{ 
   text-align: right; 
}

نتیجه:

چینش زیر مجموعه ها در CSS
چینش زیر مجموعه ها در CSS

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

کدی به شکل زیر داریم،‌ که نتیجه اون در پایین اومده:

<div class="first">
   <div class="second">
      <p>CSS tutorial</p>
   </div>
</div>
div.first{
   width: 500px;
   height: 200px;
   background-color: #48cd4f;
   text-align:center;
}

div.second{
   width:10%;
}

p{
   font-family: sans-serif;
   color:white;
   padding: 20px;
}
تمرین برای چینش متن CSS
تمرین برای چینش متن CSS

هر کاری می‌کنیم که متن رو بیاریم وسط عنصر سبز رنگ، نمیشه.

مشکل از کجاست؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

در نهایت، خاصیت text-align رو علاوه بر عناصر پدر، به عناصر فرزند تعمیم دادیم.

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

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

12 نظر

12 پاسخ

  1. سلام من توی هدرم یه تگ باتن یا همون دکه درست کردم و میخوام ببرمش سمت چپ هدرم ولی نمیشه توی هدرم ایکون نوشته و نوبار هم هست فلت زدم تکس الاین زدم نمیشه فقط نوشته توش میره این ور اون ور

    1. سلام
      متاسفانه سوال گنگ بود و من نفهمیدم مشکل شما چی هست تا بتونم راهنمایی کنم.

  2. سلام
    برای اینکه متن وسط کادر سبز رنگ قرار بگیره باید width رو برای div با کلاس second روی ۱۰۰ درصد تنظیم کنیم

  3. سلام در پاسخ به سوالتون دو راه وجود داره یکی اینکه بیایم عرض دیویژن سکند رو 100 درصد بزاریم یا اینکه بیایم و عنصر p داخل دیویژن سکند رو برداریم و بزاریم داخل دیویژن فرست.ممنون

    1. سلام متين. هم پاسخ اول درسته و هم پاسخ دوم. ممنون ازت ?

  4. با سلام
    من فکر میکنم چون عصر پدر عنصر pیعنی سکند دایو تنها 10% عنصر فرست دایو رو شامل میشه پس وقتی ما تکست الاین رو سنتر تعریف می کنیم اون رو در وسط عنصر سکند دایو ترجمه می کنه و چون اون در کنار قرار گرفته متن در وسط ظاهر نمیشه

  5. فکر میکنم دلیل اینکه نمیشه متن و وسط بیاریم اینه که عنصر p درون یه دایو قرار گرفته که عرض اون 10 درصد عرض عنصر پدره که میشه 50 پیکسل که این مقدار برای جابه جا کردن عنصر p در خود عنصر دایو دومی مناسب نیست و از طرفی در اینجا خاصیت پدینگ با ضخامت 20 پیکسل تعریف شده یعنی باید متن 20 پیکسل از همه طرف از دیواره عنصر دایو دومی فاصله بگیره که با توجه به کوچک بودن عرض این کار از طرف چپ و راست غیر ممکن است. پس فکر میکنم اول باید درصد عرض دایو دوم و بالاتر ببریم و بعد برای دایو دوم یعنی اونی که کلاس secondداره خاصیت text-align:center را تعریف کنیم.

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

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

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

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=