如何在网格布局 Bootstrap 5 中垂直对齐中心文本？答案

【问题标题】：How to Vertical Align Center Text in Grid-Layout Bootstrap5?如何在网格布局 Bootstrap 5 中垂直对齐中心文本？
【发布时间】：2021-11-08 01:28:53
【问题描述】：

我有 Bootstrap 5.1.3 和我的 HTML：

<!DOCTYPE html>
<html lang="vi">
<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>
    <!-- Dòng code dưới để add Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- Dòng code dưới để add Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container-fluid bg-dark text-white">
        <div class="row" style="height:100px;">
            <div class="col-sm-4 bg-primary">R1 C1 need Vertical align centered</div>
            <div class="col-sm-6 bg-danger">R1 C2 need Vertical align centered</div>
            <div class="col-sm-2 bg-info">R1 C3 need Vertical align centered</div>
        </div>
        <div class="row" style="height:79px">
            <div class="col-sm-6 bg-info">R2 C1 need Vertical align centered</div>
            <div class="col-sm-6 bg-danger">R2 C2 need Vertical align centered</div>
        </div>
    </div>
</body>
</html>

我的链接示例小提琴：Click here

我想在高度为 100px 的列中垂直居中文本...怎么做？感谢您的支持。

【问题讨论】：

标签： bootstrap-5

【解决方案1】：

我找到了答案，就是属性：

高度：100px；行高：100px;

<div class="container-fluid">
   <div class="row text-white text-center" style="height:100px;line-height:100px">
     <div class="col-sm-6 bg-primary">R1 C1 Centered</div>
     <div class="col-sm-4 bg-dark">R2 C2 Centered</div>
     <div class="col-sm-2 bg-success">R3 C3 Centered</div>
   </div>
</div>

【讨论】：