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

68

0

وسطچین کردن با 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

 

مرحله نهایی

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

  • کد حالت افقی – 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;
    }
    
    

     

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

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

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

اشتراک
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments
ارسال تیکت
0
Would love your thoughts, please comment.x
()
x