📜  如何在 Bootstrap 4 中对齐图像?(1)

📅  最后修改于: 2023-12-03 15:08:33.969000             🧑  作者: Mango

如何在 Bootstrap 4 中对齐图像?

在 Bootstrap 4 中对齐图像可以使用以下类来实现:

  • .float-left:左对齐;
  • .float-right:右对齐;
  • .mx-auto:水平居中。

例如:

<img src="example.jpg" class="float-left">

以上代码将图像左对齐。

如果需要水平居中,可以使用以下代码:

<img src="example.jpg" class="mx-auto d-block">

其中,.d-block 用于将图像显示为块级元素,以便使用 .mx-auto 居中。

注意,以上命令都需要与 img 标签一起使用。

对于直接使用 img 标签的图像,也可以使用以下类居中:

<div class="text-center">
  <img src="example.jpg">
</div>

其中,.text-center 用于居中 div 元素中的内容,从而实现图像的居中。

以上就是在 Bootstrap 4 中对齐图像的方法。可以根据需求选择相应的类来实现对齐和居中。