Blaze UI 垂直对齐

Blaze UI是一个免费的开源 UI 工具包，它为快速构建网站提供了一个很好的结构，具有可扩展和可维护的基础。 Blaze UI 中的所有组件都是移动优先开发的，并且仅依赖于原生浏览器功能，而不是单独的库或框架。它帮助我们以一致的风格快速高效地创建可扩展且响应迅速的网站。

对齐帮助我们将正确的元素放置在屏幕上的正确位置。 Blaze UI 为我们提供了多个类来帮助我们在屏幕上对齐对象。 Blaze UI 中有多种对齐方式，例如居中、垂直、水平、绝对居中等等。在本文中，我们将讨论 Blaze UI 中的垂直对齐。

垂直对齐将元素完美地垂直放置在相关容器的中心。要将元素定位在其父元素的垂直中心，我们使用.u-center-block__content–vertical类。 .u-center-block__content–vertical类将给定元素定位到父元素的垂直中心。

Blaze UI 对齐垂直类：

• u-center-block__content–vertical：此类将元素定位到父元素的垂直中心。

句法：

  

    ...
  

示例 1：此示例演示了使用 Blaze UI 的垂直对齐类在 div 内居中的文本元素。

HTML

  

  
  
  

  

  
    
GeeksforGeeks
    Blaze UI Vertical Alignment
    

    

      

        Hello Blaze!
      
    
  

  

输出：

Blaze UI 垂直对齐

示例 2：此示例演示了使用 Blaze UI 的垂直对齐类在 div 内居中的图像元素。

HTML

  

  
  
  

  

  
    
GeeksforGeeks
    Blaze UI Vertical Alignment
    

    

      

        
      
    
  

  

输出：

Blaze UI 垂直对齐

参考： https ://www.blazeui.com/utils/alignment/