可以通过以下步骤实现:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
d-flex
和justify-content-center
类来实现水平居中,使用align-items-center
类来实现垂直居中。同时,可以使用text-center
类来实现文本居中。<div class="d-flex justify-content-center align-items-center text-center">
<img src="path/to/image.jpg" alt="Image" class="img-fluid">
</div>
col
)中,并使用mx-auto
类来实现水平居中。<div class="row">
<div class="col mx-auto">
<img src="path/to/image.jpg" alt="Image" class="img-fluid">
</div>
</div>
这样,使用Bootstrap将水平高度图像以动态方式居中就完成了。请注意,以上示例中的path/to/image.jpg
应替换为实际图像的路径。
领取专属 10元无门槛券
手把手带您无忧上云