在引导程序中垂直对齐图像旁边的文本[重复]
我试图创建一个网页的主横幅旁边的图像标题。我尝试做的一个示例可以在下面找到：https://optimaninja.com/
我正在使用bootstrap,下面是一些我必须开始的简单初学者代码：
引导代码：
<!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>
<style>
.other {
vertical-align: center;
justify-content: center;
align-items: center;
}
</style>
谢谢你的帮助。
共有1个答案
您可以尝试将“align-items-center”类添加到“row”div（或将CSS中的.other更改为.row)。
-
问题内容： 为什么不行？但是， 确实 可以。 问题答案： 实际上，在这种情况下，这非常简单：对图像应用垂直对齐。由于所有内容都在同一行中，因此它实际上是要对齐的图像，而不是文本。 在FF3中测试。 现在，您可以将flexbox用于这种类型的布局。
-
问题内容： 我有一个包含图像和ap标签的div（如下所示）。我想根据段落的多少行在div的中间垂直对齐图像。垂直对齐不起作用。我现在正在使用JavaScript找出要添加到margin- top的数量，但是宁愿使用CSS。有任何想法吗？ 问题答案： 尝试将元素的属性设置为图像的高度，例如： 编辑： 刚意识到我读错了问题，却错过了多行的事实。尝试的一种选择是完全删除元素，并将其设置为of的，使用的o
-
问题内容： 一个简单的问题：如何使用引导程序在一个col中垂直对齐一个col？这里的例子（我想垂直对齐child1a和child1b）： HTML 更新 一些CSS： 问题答案： .parent { display: table; table-layout: fixed; } 防止破坏col- *类的功能。
-
在bootstrap中有没有一种方法可以： 所以我希望文本和图像在页面的中心。右边是文本，右边对齐，左边是图像，我试过用divs，然后用table没有成功。 我试过：
-
问题内容： 我在div中垂直对齐图像时遇到问题 据我所知，我需要“显示：块；” 定位图像在中心，这是可行的。同样在教程中，我找到了很多答案，但它们并不是“有用的”，因为我的所有图像都不在同一高度！ 问题答案： 如果容器中的高度固定，则可以将line-height设置为与高度相同，并且它将垂直居中。然后只需添加text-align使其水平居中即可。 编辑 您的代码应如下所示： 更新 现在是2016年