如何在 Bootstrap 4 中对齐图像？

我们知道，将图像添加到网站会使其更具吸引力和美观。有时，我们需要将图像向右或向左对齐。大多数时候，我们将图像放在中心。使用传统的 CSS，我们必须编写一堆代码来完成这个特定的任务。 Bootstrap 为图像提供了不同的类，以使它们的外观更好，并使其具有响应性。使图像具有响应性意味着它应该根据其父元素进行缩放。即图像的大小不应溢出其父元素，并且会根据其父元素大小的变化而增长和缩小，而不会丢失其纵横比。使用 Bootstrap 4，很容易应用预定义的引导类来对齐图像。在本文中，我们将学习在 Bootstrap 4 中对齐图像。

句法：

• 对于响应式图像

• 用于将图像向左对齐

• 用于将图像向右对齐

• 用于将图像与中心对齐

方法：

• 将图像放在标记内所需的行。
• 将图像元素包裹在.float-left 向左对齐的类， .float-right 向右对齐。
• 为了在中心对齐，我们需要使用.mx-auto 和.d-block类的引导程序。
• 为了创建响应式图像，我们可以在 标签中使用.img-fluid类。

我们将按照以下步骤来对齐图像：

第 1 步：在 HTML 部分中包含 Bootstrap CSS 以加载样式表。

“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”
integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm”
crossorigin=”anonymous”>

添加 Bootstrap JavaScript 插件和依赖项。

第2步：我们可以直接复制Bootstrap官方文档中给出的Bootstrap starter模板。

HTML

  
    
    
    
  
    
    
  
    Hello, world!
  
  
    Hello, world!
  
    
    
    
    
    
    
    
    
  

第 3 步：将图像元素包裹在.float-left、.float-right或.mx-auto 和 .d-block 类类中，以将其对齐到所需位置。

以下示例将演示图像对齐的概念。

示例 1：将图像向左对齐

我们可以借助引导程序的.float-left类将图像向左对齐或浮动。

HTML

  

  
    
    
    
  
    
    
  
    

  

    
Image at the Left!
    

  

输出：

示例 2：将图像向右对齐

我们可以借助 bootstrap 的.float-right类将图像向右对齐或浮动。

HTML

  

  
    
    
    
  
    
    
  
    

  

    
Image at the Right!
    

  

输出：

示例 3：在中心对齐图像

我们可以借助 bootstrap 的.mx-auto （在 CSS 中表示margin: auto ）和.d-block （在 CSS 中表示display: block ）类将图像居中对齐。

HTML

  

  
    
    
    
  
    
    
  
    

  

    
Image at the Center!
    

  

输出：