How to vertically center table cell in Bootstrap?
I have a bootstrap table that contains a form-inline in a certain column. And this caused the contents in other columns not vertically center aligned. (As seen in the 1st code snippet) How to avoid this situation?
Actually, if I remove that form-inline from the table, everything works fine. (As seen in the 2nd code snippet) So I guess the problem comes from the form-inline embedded into the table.
/* Fit the table cell width to the contents */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol</th>
<th style="width: 0.01%">Share</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td style="width: 0.01%">1</td>
<td>
<form class="form-inline justify-content-center">
<button type="submit" class="btn btn-danger" name="TSLA" value="Sell">
<i class="fas fa-minus-circle"></i>
</button>
<input type="number" name="quantity" class="form-control" value="1" min="1" max="100" style="width:70px">
<button type="submit" class="btn btn-primary" name="TSLA" value="Buy">
<i class="fas fa-plus-circle"></i>
</button>
</form>
</td>
</tr>
</table>
</body>
</html>/* Fit the table cell width to the contents */
table th,
table td {
width: 1%;
white-space: nowrap;
}
.center-screen {
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped center-screen" style="max-width: 100%">
<thead>
<tr>
<th>Symbol</th>
<th style="width: 0.01%">Share</th>
</tr>
</thead>
<tbody>
<tr>
<td>NVDA</td>
<td style="width: 0.01%">1</td>
</tr>
</table>
</body>
</html>In your code, there is a style by default, which prevents your table to be vertically in the middle.
Here it is:
.table td, .table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
so you can override this:vertical-align: middle;