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

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

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

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

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

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

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

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

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

یا در وسط جعبه:

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

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

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

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

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

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

کد HTML:

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

کد CSS:

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

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

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

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

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

کد CSS:

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

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

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

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

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

خاصیت text-align

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

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

وسط چین – Center

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

div{
   text-align: center;
}

چپ چین – Left

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

div{
   text-align: left;
}

راست چین – right

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

div{
   text-align: right;
}

تراز کردن – justify

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

div{
   text-align: justify;
}

شروع خط – start

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

div{
   text-align: start;
}

پایان خط – end

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

div{
   text-align: end;
}

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

اختصاص خاصیت 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; 
}

نتیجه:

پایان ترم

سوال:

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

<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 ، با مفهوم و نحوه تراز کردن متن ها به صورت افقی آشنا شدیم.

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

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

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

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