وسطچین کردن عناصر html در css

حتما برایتان پیش آمده است که در میانه راه کدنویسی یک قالب یا طراحی یک المان وب با مشکل وسطچین نشدن برخی عناصر مواجه شوید، در ادامه با ما همراه باشید تا “وسطچین کردن در html و css” را به شما آموزش دهیم و یکبار برای همیشه این مشکل را بطور کامل مرتفع سازیم.

نحوه وسطچین کردن عناصر html

به این منظور مراحل زیر را از ابتدا و به ترتیب انجام دهید :

1) تشخیص تگ والد و فرزند

اولین گام برای وسطچین کردن در html، تشخیص صحیح تگ والد و تگ فرزنده! تعریف زیر را به خاطر بسپارید :

تعریف:

تگ فرزند : تگی که درون یک تگ دیگر قرار گیرد اصطلاحا تگ فرزند نامیده می شود و تگ بیرونی را تگ پدر یا والد می نامند. اگر متوجه نشدید به مثال زیر دقت کنید :

<section class="pedar">
  <div class="farzand">
    salam Tutsxen
  </div>
</section>

در این مثال تگ سکشن تگ پدر و تگ div تگ فرزند است.

به مثال زیر دقت کنید :

<section class="pedar">
  <header>Tutsxen</header>
  <div class="farzand">
    <span>salam Donya</span>
  </div>
</section>

در این مثال تگ سکشن والد تگ header و div است و تگ div والد تگ span! از طرفی تگ div خود فرزندِ تگ section است.

2) تگ inline است یا block

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

<section></section>
<div></div>
<h1><h2><h3><h4><h4><h5><h6>
و...

مهم ترین تگ های اینلاین لول عبارت اند از :

<a></a>
</span<</span>
<button></button>
و...

3) انتخاب نوع وسطچین – عمودی یا افقی

در html عناصر هم قابلیت وسط قرار گرفتن بصورت عمودی دارند هم افقی!

4) مرحله نهایی وسطچین کردن در css :

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

• کد حالت افقی – inline :
  فقط لازم است استایل زیر را به عنصر پدر نسبت بدهیم.

  #pedar {
    text-align: center;
  }
  
  

• کد حالت افقی – block :
  فقط لازم است استایل زیر را به عنصر فرزند نسبت بدهیم.

  #Farzand {
    margin-left: auto;
    margin-right: auto;
  }
  
  

• کد حالت عمودی – inline :
  الف) فرزند یک خطی است:

  #farzand {
    height: 200px; //متناسب با عدد مد نظر نظر خودتون
    line-height: 200px; //متناسب با عدد مد نظر نظر خودتون
    white-space: nowrap;
  }
  

  ب) فرزند بیش از یک خط دارد:
  بهترین راه استفاده از فلکس باکس است :

  #farzand {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 500px; // عدد متناسب خودتون
  }
  

• کد حالت عمودی – block :
  الف) ارتفاع فرزند مشخص :

  #pedar {
    position: relative;
  }
  
  #farzand {
    position: absolute;
    height: 100px;//متناسب با ارتفاع مد نظر شما
    top: 0%;
    bottom: 0%;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  

  ب) ارتفاع فرزند نامشخص :

  #farzand {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  #pedar {
    transform-style: preserve-3d;
  }
  
  

  خب به پایان آموزش جذاب “وسطچین کردن در html و css” رسیدیم. چنانچه ابهام و اشکال داشتید، می توانید در بخش نظرات مطرح نمایید.