在 Bootstrap 中垂直对齐图像旁边的文本 [重复]答案

【问题标题】：Vertically Align Text Next To An Image in Bootstrap [duplicate]在 Bootstrap 中垂直对齐图像旁边的文本 [重复]
【发布时间】：2021-08-08 00:12:12
【问题描述】：

我正在尝试在网页主横幅的图像旁边创建一个标题。我正在尝试做的一个例子可以在这里找到：https://optimaninja.com/

我正在使用引导程序，下面是一些我必须开始的简单入门代码：

引导代码：

<!DOCTYPE html>
<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

</head>
<body>
  <div class='container other'>
    <div class="row">
      <div class="col-5">
        <h3>Understand Police Behavior</h3>
      </div>
      <div class="col-7">
        <img src="pic.jpg" class="img-fluid" style="max-width: 600px;">
      </div>
    </div>
  </div>
</div>
</body>
</html>

它会产生一个如下所示的首页：

我想做的是让我的标题垂直对齐，以便它在图像旁边居中，而不是在顶部。

为此，我尝试了以下 CSS 选择器对 other 和 h3 元素的不同排列：

<style>
.other {
  vertical-align: center;
  justify-content: center;
  align-items: center;
}
</style>

这些似乎都没有任何效果。

感谢您的帮助。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以尝试将“align-items-center”类添加到“行”div（或在 CSS 中将 .other 更改为 .row）。

【讨论】：

【解决方案2】：

使用弹性对齐的引导类

d-flex justify-content-center align-items-center

<!DOCTYPE html>
<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

</head>
<body>
  <div class='container other'>
    <div class="row position-relative">
      <div class="position-absolute h-100 d-flex justify-content-center align-items-center">
        <h3>Understand Police Behavior</h3>
      </div>
      <div class="col-12">
        <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img-fluid" style="max-width: 600px;">
      </div>
    </div>
  </div>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

okay just use this in your style tag

.row {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    and listen my tip you can not use propertys like this vertical-         align: center;
      justify-content: center;
      align-items: center;
     without discribing your dispay

【讨论】：