9 روش برای پیاده سازی تراز عمودی در CSS با مثال

ek3nk4r 2023-06-21

0 111 خواندن این مطلب 9 دقیقه زمان میبرد

9 روش برای پیاده سازی تراز عمودی در CSS با مثال

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این مقاله قصد داریم روش‌های مختلفی را برای پیاده‌سازی هم‌ترازی عمودی در CSS به همراه مثال‌ها و استفاده از موارد برای هر روش بررسی کنیم.

در اینجا لیستی از راه های مختلفی است که می خواهیم بررسی کنیم

تراز عمودی با استفاده از Flexbox
تراز عمودی با استفاده از موقعیت: مطلق
تراز عمودی با استفاده از نمایشگر: جدول
تراز عمودی با استفاده از CSS: Grid
تراز عمودی با استفاده از ارتفاع خط
تراز عمودی با استفاده از Padding
تراز عمودی با استفاده از Display: inline-block
تراز عمودی با استفاده از تابع calc() CSS
تراز عمودی با استفاده از حاشیه: خودکار

بیایید هر یک از اینها را یکی یکی مرور کنیم

فهرست مطالب

1. تراز عمودی با استفاده از flexbox

Flexbox یک حالت طرح بندی در CSS3 است. Flexbox به شما امکان می دهد تا به طور خودکار ظروف را بر اساس ارتفاع و عرض صفحه تراز کنید و اندازه آنها را تغییر دهید

Flexbox بر خلاف برخی دیگر از فریم ورک های CSS، دارای جهت آگنوستیک است. در اینجا نحوه تراز عمودی یک شی با استفاده از Flexbox آورده شده است

ویژگی هایی که باید به صورت عمودی تراز کنیم عبارتند از

نمایشگر: انعطاف پذیر
align-اقلام: مرکز

همچنین می توانید استفاده کنید جهت انعطاف پذیری: col برای تراز کردن آیتم ها به صورت عمودی به جای ردیف

اجازه بدین مثالی را مطرح کنیم

مثال 1: تراز کردن نوار ناو

.nav {
    display: flex;
    justify-content: space-around; 
    height: 60px;
    background-color: #333;
    color: #fff;
    align-items: center; /*aligns the items vertically*/

}

<nav class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item">Services</div>
    <div class="nav-item">Contact</div>
</nav>

مثال: 2 تراز عمودی متن در یک بخش قهرمان

در این مثال، متن را در قسمت قهرمان به صورت عمودی تراز می کنیم.

<section class="hero-section">
    <h1 class="hero-title">Awesome Corporation!</h1>
</section>

.hero-section {
    display: flex;
    flex-direction: column; /* this will create a column of elements */
    justify-content: center; /* The property centers the elements vertically. */
    height: 100vh; /* we are giving the full viewport height */
    text-align: center; /* we are aligning the text horizontally */
    color: #blue;
}

2. تراز عمودی با استفاده از موقعیت: مطلق

موقعیت: مطلق

می توان برای تراز عمودی CSS استفاده کرد. با این حال، باید با احتیاط از آن استفاده کرد زیرا در صورت عدم استفاده صحیح می تواند منجر به مشکلات چیدمان شود.

سایر خصوصیات CSS مانند flexbox یا Grid به استفاده از موقعیت: مطلق ارجحیت دارند.

در اینجا چند نمونه از

مثال 1: تراز عمودی یک عنصر در وسط یک عنصر والد

<div class="parent-element">
    <div class="child-element">Centered text!</div>
</div>

.parent-element {
    position: relative;
    height: 200px;
    border: 1px solid black;
}

.child-element {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

مثال 2: تراز کردن چندین عنصر به صورت عمودی با استفاده از موقعیت: مطلق

در این مثال، نحوه تراز کردن چندین عنصر را به صورت عمودی با استفاده از آن یاد خواهیم گرفت موقعیت: مطلق

    <div class="parent-element">
      <div class="child-element" id="child1">Element a</div>
      <div class="child-element" id="child2">Element b</div>
      <div class="child-element" id="child3">Element c</div>
    </div>

body {
  font-family: sans-serif;
}

.parent-element {
  position: relative;
  height: 300px;
  border: 1px solid black;
}

.parent {
  position: relative;
  height: 300px;
  border: 1px solid black;
}

.child {
  position: absolute;
  width: 100%;
}

#child1 {
  top: 0;
}

#child2 {
  top: 100px; 
}

#child3 {
  top: 200px;
}

💡
JavaScript ChatAPI و SDK: با DeadSimpleChat به راحتی Chat را به وب سایت یا برنامه خود اضافه کنید

3. با استفاده از جدول نمایش: جدول، موارد را به صورت عمودی تراز کنید

در این روش از ویژگی های عنصر جدول برای تراز عمودی عناصر استفاده می کنیم

مثال 1: تراز عمودی در وسط یک عنصر والد

بیایید به کد نگاه کنیم

body {
  font-family: sans-serif;
}

.parent-element {
  display: table;
  height: 200px;
  width: 100%;
  border: 1px solid black;
}

.child-element {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

    <div class="parent-element">
      <div class="child-element">Center me!</div>
    </div>

در این مثال، والد یک جدول و فرزند یک سلول جدول است. سپس با استفاده از عبارت، کودک را به صورت عمودی تراز می کنیم عمودی- تراز: وسط ویژگی

مثال 2: تراز کردن 3 عنصر به صورت عمودی در یک خط

اجازه دهید ابتدا به کد نگاه کنیم و سپس بیشتر در مورد آن بحث کنیم

  <div class="parent-element">
      <div class="child-element">Element A</div>
      <div class="child-element">Element B</div>
      <div class="child-element">Element C</div>
    </div>

و CSS

body {
  font-family: sans-serif;
}
.parent-element {
  display: table;
  width: 100%;
  border: 1px solid black;
}

.child-element {
  display: table-cell;
  height: 100%;
  border: 1px solid red;
}

در این مورد، ما هر عنصر فرزند را به عنوان یک سلول جدول در ظرف والد جدول نمایش می دهیم

4. تراز عمودی با استفاده از CSS: Grid

اجازه دهید از شبکه CSS استفاده کنیم. Grid یک راه ساده برای تراز عمودی محتوا ارائه می دهد

مثال 1: تراز کردن یک فرزند مجرد به صورت عمودی در داخل ظرف والد

    <div class="grid">
      <div class="item">Item that is in center</div>
    </div>

.grid {
  display: grid;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

در این مثال ما یک کلاس Grid و یک کلاس آیتم داریم و به کلاس grid خاصیت display:grid می دهیم و آیتم ها را در مرکز تراز می کنیم.

توجه: Grid با مرورگرهای قدیمی پشتیبانی نمی شود، اما بسیاری از مرورگرهای جدیدتر پشتیبانی می کنند.

مثال 2: تراز کردن چندین مورد به صورت عمودی در داخل یک ظرف

در این مثال، ما قصد داریم چندین آیتم را به صورت عمودی تراز کنیم

    <div class="grid">
      <div class="item">Item A</div>
      <div class="item">Item B</div>
      <div class="item">Item C</div>
    </div>

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

مثال 1: متن در یک نوار پیمایش

در این. به عنوان مثال، ما می خواهیم پیوندها را در نوار ناوبری با استفاده از ارتفاع خط به صورت عمودی در مرکز قرار دهیم

    <div class="navbar">
      <a href="#">Support</a>
      <a href="#">Products</a>
      <a href="#">Services</a>
    </div>

body {
  font-family: sans-serif;
}
.navbar {
  height: 50px;
  background-color: #333;
}

.navbar a {
  line-height: 50px;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

مثال 2: وسط متن در یک دکمه

اگر یک دکمه بزرگ دارید و می خواهید متن را در مرکز دکمه قرار دهید، می توانید این کار را با استفاده از ارتفاع خط انجام دهید.

ترفند وسط متن با استفاده از ارتفاع خط، تنظیم آن بر روی 50٪ است.

<!DOCTYPE html>
<html>
  <body>
    <button class="signup-button">Sign up for a new Account</button>

    <script src="src/index.js"></script>
  </body>
</html>

body {
  font-family: sans-serif;
}
.signup-button {
  height: 40px;
  line-height: 40px;
  border: none;
  background-color: #008cba;
  color: white;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

6 تراز عمودی با استفاده از پد

بسیاری از مواقع می توان از بالشتک برای تراز کردن اقلام داخل ظرف استفاده کرد. یاد آوردن

ما یک دکمه با ارتفاع ثابت داریم و می خواهیم متن را به صورت عمودی در مرکز آن قرار دهیم

<button class="sign-up">Sign Up</button>

.sign-up {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

در مثال بالا، ما بالشتک بالا و پایین 10 پیکسل و لایه چپ و راست 20 پیکسل می دهیم تا متن را در جایی که می خواهیم در داخل دکمه قرار دهیم وسط می دهیم.

مثال بعدی یک نمونه مهم است و در اینترنت بسیار جستجو شده است

مثال 2: وسط عمودی یک خط متن در داخل یک div

<div class="box">Vertically centered text</div>

.box {
    height: 50px;
    padding: 15px 0;
    border: 1px solid #000;
    text-align: center;
}

در اینجا ما 15 پیکسل از padding را در بالا و پایین div با کادر کلاس اعمال می کنیم

بالشتک، مرزهای div را 15 پیکسل به بالا و پایین فشار می دهد، بنابراین متن را به صورت عمودی در وسط قرار می دهد.

7. تراز عمودی با استفاده از Display: inline-block

Display: inline-block یک ویژگی مهم css است که با استفاده از آن می توانید عنصر را به صورت درون خطی نمایش دهید (مانند یک عنصر درون خطی) و همچنین می توانید ارتفاع و عرض عنصر و همچنین مانند یک عنصر بلوک را تنظیم کنید.

لازم به ذکر است که عنصر درون خطی به صورت واقعی با عناصر برادر خود کار می کند و نه در داخل عنصر

ویژگی vertical-align را می توان همراه با عنصر inline-block برای قرار دادن عمودی عنصر در رابطه با یکدیگر استفاده کرد.

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="navigation">
        <a href="#">Products</a>
        <a href="#">Services</a>
        <a href="#">Support</a>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

body {
  font-family: sans-serif;
}
.container > * {
  display: inline-block;
  vertical-align: middle;
}

.navigation a {
  padding: 0 10px;
}

8. تراز عمودی با استفاده از تابع calc() CSS

را calc() در css می توان برای انجام محاسبات برای تعیین مقادیر ویژگی عناصر استفاده کرد.

همچنین می‌توان از آن برای تراز کردن محتوا با تنظیم موقعیت‌های بالا یا پایین و کم کردن 50 درصد ارتفاع آنها استفاده کرد.

عنصر والد باید روی نسبی و عنصر فرزند باید روی مطلق تنظیم شود

  <div class="container">
      <div class="content">Hello, World!</div>
    </div>

body {
  font-family: sans-serif;
}
.container {
  position: relative;
  height: 300px;
  border: 1px solid #000;
}

.content {
  position: absolute;
  top: calc(50% - 10px);
  width: 100%;
  text-align: center;
}

ما اینجا چه کار می کنیم.

ما در حال محاسبه موقعیت بالای برنامه .content با استفاده از عبارت هستیم calc(50% - 10px) این آن را تا نیمه راه پایین می برد .container و سپس آن را تا نصف ارتفاع خودش به سمت بالا می برد

9. تراز عمودی با استفاده از حاشیه: خودکار

تراز عمودی با استفاده از margin:auto می‌توانید موارد را به‌صورت عمودی تراز کنید، اما این فقط زمانی کار می‌کند که کانتینر والد ارتفاع مشخصی داشته باشد و ظرف فرزند دارای ارتفاع مشخص باشد و کانتینر والد یک ظرف انعطاف‌پذیر باشد.

برای بهتر شدن به چند نمونه نگاه کنید

<!DOCTYPE html>
<html>
  <body>
    <section class="container">
      <button class="button">Click Me!</button>
    </section>

    <script src="src/index.js"></script>
  </body>
</html>

body {
  font-family: sans-serif;
}
.container {
  display: flex;
  height: 300px;
  border: 1px solid #000;
}

.button {
  margin: auto;
}

در این مثال، والد دارای ارتفاع مشخص و ویژگی display:flex است.

.hero-heading و margin:auto باعث می شود که به صورت عمودی و افقی در مرکز ظرف اصلی قرار گیرد.

نتیجه

در این مقاله روش‌های مختلفی را نشان داده‌ایم که می‌توانید با استفاده از روش‌ها و ویژگی‌های مختلف css موارد را به صورت عمودی تراز کنید

در اینجا تمام روش ها برای شما خلاصه شده است:

نمایشگر: جدول در اینجا شما عنصر والد را به عنوان جدول ایجاد می کنید، با انجام این کار عنصر فرزند به سلول جدول تبدیل می شود و از این رو می توان به راحتی به صورت عمودی تراز کرد.
فلکس باکس: در اینجا کانتینر والد را به یک ظرف انعطاف‌پذیر تبدیل می‌کنیم و به راحتی می‌توانیم اجزای فرزند را با استفاده از ویژگی align-item flexbox تراز کنیم.
CSS: گرید : با CSS Grid می توانید طرح بندی سطرها و ستون ها را ایجاد کنید. با استفاده از CSS Grid می توانید به راحتی موارد را به صورت عمودی تراز کنید
ارتفاع خط: در روش ارتفاع خط می توانید به راحتی تک خط متن را در یک ظرف تراز کنید. اگر ارتفاع ظرف را می دانید می توانید به راحتی ارتفاع خط کودک را تنظیم کنید و آن را با ظرف مطابق میل خود تنظیم کنید.
لایه گذاری: می توانید بالشتک را طوری تنظیم کنید که ناحیه اطراف عنصر را کم و زیاد کند و با استفاده از آن می توانید به راحتی موارد را به صورت عمودی تراز کنید.
نمایشگر: inline-block: می توانید به راحتی متن و تصاویر درون خطی را با استفاده از ویژگی های عنصر درون خطی تراز کنید
تابع calc() CSS: با استفاده از تابع calc()CSS می توانید ارتفاع ظرف را محاسبه کرده و با تنظیم ارتفاع روی 50 درصد، ارتفاع فرزند را طوری تنظیم کنید که به طور خودکار با کانتینر هماهنگ شود.
موقعیت: مطلق : می توانید از این ویژگی برای تنظیم موقعیت: absolute روی عنصر فرزند استفاده کنید تا آن را با ویژگی والد تراز کنید
حاشیه: خودکار: می‌توانید حاشیه: خودکار را در یک ظرف انعطاف‌پذیر تنظیم کنید تا به طور خودکار آیتم یا عنصر فرزند را به صورت عمودی و افقی با توجه به ظرف اصلی تراز کند.