如何对齐容器的项目基线？

在本文中，我们将学习如何将项目与容器的基线对齐。 CSS 中有三种对齐方式，基线对齐、位置对齐和分布式对齐。基线对齐用于跨一组对齐主题对齐框的基线。它们可以用作使用 justify/align-content进行内容对齐的值，也可以用作使用justify/align-self 进行自对齐的值。

语法：有三个关键字可用于设置容器中项目的基线对齐方式，如下面的语法所示。

.container {
  align-items: baseline | first baseline | last baseline;
}

以下示例演示了这种方法：

示例 1：在此示例中，项目与容器的基线对齐。

HTML

  


  

    
Text One
    
Text Two with
      baseline alignment.
    
Text Three
  

输出：

示例 2：在此示例中，项目与容器的第一个基线对齐。

HTML

  


  

    
Text One
    

      Text Two with first 
      baseline alignment.
    
    
Text Three
  

输出：

示例 3：在此示例中，项目与容器的最后一条基线对齐。

HTML

  


  

    
Text One
    

      Text Two with last
      baseline alignment.
    
    
Text Three
  

输出：