在 Bootstrap 中垂直对齐图像旁边的文本 [重复]
Posted
技术标签:
【中文标题】在 Bootstrap 中垂直对齐图像旁边的文本 [重复]【英文标题】：Vertically Align Text Next To An Image in Bootstrap [duplicate] 【发布时间】：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>
这些似乎都没有任何效果。
感谢您的帮助。
【问题讨论】：
【参考方案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【讨论】：
以上是关于在 Bootstrap 中垂直对齐图像旁边的文本 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法将文本与 CSS 内容属性（chrome）中的图像垂直对齐？