[分享]css两种不同文字底部对齐

在CSS中，有两种不同的方法可以实现文字底部对齐，分别是基于块级元素和基于行内块元素的方法。/ 基于块级元素的方法 / .block { display: flex; alignitems: flex...

在CSS中，有两种不同的方法可以实现文字底部对齐，分别是基于块级元素和基于行内块元素的方法。

/* 基于块级元素的方法 */
.block {
  display: flex;
  align-items: flex-end;
}

/* 基于行内块元素的方法 */
.inline-block {
  display: inline-block;
  vertical-align: bottom;
} 

第一种方法是将文字包含在一个块级元素中，并将该元素设为弹性布局模式，然后使用align-items属性将内容底部对齐。这种方式适用于包含长文本块的情况，例如段落或文章。

第二种方法是将文字包含在一个行内块元素中，并使用vertical-align属性将内容底部对齐。这种方式适用于包含短文本块的情况，例如标签或按钮。

需要注意的是，这两种方法都需要在外层容器中设置高度或者使用padding或margin进行间距控制，以便正确对齐文字底部。