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

1193

0

وسطچین کردن با css

این پست بخشی از مسیر متخصص CSS است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

این پست بخشی از مسیر متخصص HTML است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

حتما برایتان پیش آمده است که در میانه راه کدنویسی یک قالب یا طراحی یک المان وب با مشکل وسطچین نشدن برخی عناصر مواجه شوید، در ادامه با ما همراه باشید تا “وسطچین کردن در 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 عناصر هم قابلیت وسط قرار گرفتن بصورت عمودی دارند هم افقی!

وسطچین عمودی و افقی در css
وسطچین عمودی و افقی در css

 

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” رسیدیم. چنانچه ابهام و اشکال داشتید، می توانید در بخش نظرات مطرح نمایید.

مهندس محسن حسن پور

برنامه نویس | طراح سایت | متخصص سئو

2سال در کنار تاتژن

guest
0 Comments
Inline Feedbacks
View all comments