我假设，与使用表不同，应该很容易垂直对齐div中的内容：
编辑：我想对齐第一列和最后一列，并保持其他列的原样。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bg-dark text-white">
<div class="col-sm-2 align-items-center">align me vertically
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">1</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-2">
<div class="row">
<span class="text-center">2</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
<div class="row mb-1">
some text could be here
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">3</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">4</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">5</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">6</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">7</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">8</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1 text-end align-middle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
</div>
</div>如何将文本和svg垂直对齐？
给你。。。
#align-text-end {
width: 100%;
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class="row bg-dark text-white">
<div class="col-sm-2 d-flex align-items-center">align me vertically
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">1</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-2">
<div class="row">
<span class="text-center">2</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
<div class="row mb-1">
some text could be here
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">3</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">4</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">5</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">6</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">7</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1">
<div class="row text-center">
<span class="text-center">8</span>
</div>
<div class="row">
<img src="https://pngimg.com/uploads/futurama/futurama_PNG73.png" class="img-fluid">
</div>
</div>
<div class="col-sm-1 d-flex align-items-center">
<div class='text-end' id='align-text-end'>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
</div>
</div>
</div>
</body>
</html>将div和align-middle更改为align-items-center。