如何在Bootstrap 5表格单元格中垂直对齐文本？-前端问题

how to vertically align a text in a bootstrap 5 table cell?(如何在Bootstrap 5表格单元格中垂直对齐文本？)

本文介绍了如何在Bootstrap 5表格单元格中垂直对齐文本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个表格，并希望其中一个单元格具有垂直对齐方式。引导程序5文档states：

更改元素的垂直对齐方式公用事业。请注意，垂直对齐仅影响内联，行内块、行内表、和表格单元格元素

我只是做了一个小的对比表，以演示我的混乱：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4wLjIvZGlzdC9qcy9ib290c3RyYXAuYnVuZGxlLm1pbi5qcw=="></script>
<script src="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzMuMy4xL2pxdWVyeS5taW4uanM="></script>

<table class="table table-dark">
    <tbody id="table">
        <tr class="row">
            <td class="col-sm-2 align-middle">not aligned</td>
            <td class="col-sm-1">
                <button>
                    <div class="row">
                        <img src="aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi9lL2UzL0ZsYWdfb2ZfUGFwdWFfTmV3X0d1aW5lYS5zdmcvMzIwcHgtRmxhZ19vZl9QYXB1YV9OZXdfR3VpbmVhLnN2Zy5wbmc=" width="64px" height="48px">
                    </div>
                </button>
            </td>
            <td class="col-sm-9" colspan="9"></td>
        </tr>
    </tbody>
</table>
<table class="table table-dark">
    <tbody>
        <tr>
            <td class="col-sm-2 align-middle">aligned</td>
            <td class="col-sm-1">
                <button>
                    <div class="row">
                        <img src="aHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi9lL2UzL0ZsYWdfb2ZfUGFwdWFfTmV3X0d1aW5lYS5zdmcvMzIwcHgtRmxhZ19vZl9QYXB1YV9OZXdfR3VpbmVhLnN2Zy5wbmc=" width="64px" height="48px">
                    </div>
                </button>
            </td>
            <td class="col-sm-9" colspan="9"></td>            
        </tr>
    </tbody>
</table>

那么，为什么第一个表格没有像第二个表格那样具有垂直正确对齐的文本？

我还尝试添加了一个弹性框：<div class="d-flex align-items-center">...</div>。结果是一样的。由于表格元素的水平对齐，我需要在我的tr中使用class="row"。如何仍能在第一个单元格中获得垂直对齐的项目？

问题描述

推荐答案