I'm using Bootstrap 5 to create a responsive table. I want the content of the table cells to be vertically centered, so I applied the align-middle class to the element. However, the content still appears aligned to the top. Here's a snippet of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Table</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h2 class="text-center mb-4">Employee List</h2>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover align-middle mx-auto" style="width: 80%;">
<thead class="table-dark text-center">
<tr>
<th>Name</th>
<th>Age</th>
<th class="text-end">Salary</th>
<th>Department</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-start">Anna Kovács</td>
<td class="text-center">28</td>
<td class="text-end">450,000</td>
<td class="text-center">Marketing</td>
<td class="text-center">*</td>
</tr>
<!-- Additional rows... -->
</tbody>
</table>
</div>
</div>
<!-- Bootstrap 5 JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
