Понимание и использование vertical-align: middle в CSS

CSS предоставляет множество свойств, которые позволяют нам управлять положением элементов на веб-странице. Одним из таких свойств является vertical-aling, которое обычно используется для управления вертикальное выравнивание содержимого в элементах таблицы. В этой статье мы рассмотрим свойство вертикального выравнивания и способы его использования для центрирования содержимого таблицы.

Понимание вертикального выравнивания

Свойство CSS vertical-align используется для указания вертикальное выравнивание встроенных элементов или ячеек таблицы. Он имеет несколько свойств, которые описаны ниже:

• baseline: выравнивает основание текстовой строки элемента с основанием текстовой строки родителя.
• length: регулирует выравнивание по вертикали, используя значение длины (например, px, pt, em и т. д.).
  
• sub: опускает базу строки элемента ниже базы родительской строки.
  
• super: поднимает базу строки элемента выше базы родительской строки.
  
• top: выравнивает верхнюю часть элемента по верхней части самой высокой строки родительского элемента.
  
• text-top: выравнивает верхнюю часть элемента по верхней части родительского текста.
  
• middle: выравнивает среднюю точку элемента с средней точкой родительской строки или ячейки таблицы.
  
• bottom: выравнивает нижнюю часть элемента по нижней части самой нижней строки родительского элемента.
  
• text-bottom: выравнивает нижнюю часть элемента по нижней части родительского текста.
  
• Initial: устанавливает для этого свойства начальное значение.
  
• inherit: наследует это свойство от родительского элемента.

В этой статье мы сосредоточимся на середине, которая выравнивает среднюю точку элемента с средней точкой родительской строки или ячейки таблицы.

Применение вертикального выравнивания: посередине к таблицам

Чтобы выровнять содержимое в ячейке таблицы по вертикали, примените свойство vertical-align: middle к нужной ячейке. Это гарантирует, что содержимое ячейки будет расположено посередине, независимо от высоты строки.

Практический пример

Вот пример того, как вы можете использовать vertical-align: middle в HTML-таблице:

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

<div class="container">
  <table class="table table-striped table-hover">
    <thead class="thead-dark">
      <tr>
        <th scope="col">Nome da Empresa</th>
        <th scope="col">Lucro Anual</th>
        <th scope="col">Valor das Cotas</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>R$200.000.000,00</td>
        <td>R$500,00</td>
      </tr>
      <tr>
        <td>Microsoft</td>
        <td>R$180.000.000,00</td>
        <td>R$400,00</td>
      </tr>
      <tr>
        <td>Amazon</td>
        <td>R$220.000.000,00</td>
        <td>R$550,00</td>
      </tr>
      <tr>
        <td>Facebook</td>
        <td>R$150.000.000,00</td>
        <td>R$300,00</td>
      </tr>
      <tr>
        <td>Google</td>
        <td>R$190.000.000,00</td>
        <td>R$450,00</td>
      </tr>
    </tbody>
  </table>
</div>

td {
  height: 75px;
}

tr {
  vertical-align: middle;
}

В этом примере ячейки таблицы имеют определенную высоту, а содержимое выровнено по вертикали посередине каждой ячейки.

Demo на CodePen

Вы можете увидеть живую демонстрацию этого примера на CodePen. Эта демонстрация показывает эффект vertical-align: middle в реальном контексте и дает четкое представление о том, как он работает в макете таблицы.

Заключение

Свойство CSS vertical-align — полезный инструмент для управления выравниванием содержимого по вертикали в элементах таблицы. Поняв, как работает это свойство и как правильно его применять, вы сможете лучше контролировать макет и представление своих веб-страниц. Как всегда, экспериментирование — отличный способ узнать и понять, как эти свойства работают в разных контекстах.