[分享]CSS两行字体同一水平对齐

在网页设计中，常常需要将两行不同字体的文本水平对齐，这时候就需要使用 CSS 来实现。 首先，在 HTML 中使用 p 标签包含两行文本，并使用 span 标签分别给每一行文本添加样式： 这是一行文...

在网页设计中，常常需要将两行不同字体的文本水平对齐，这时候就需要使用 CSS 来实现。
首先，在 HTML 中使用 p 标签包含两行文本，并使用 span 标签分别给每一行文本添加样式：

<p>
  <span class="text1">这是一行文本1</span>
  <span class="text2">这是一行文本2</span>
</p> 

接着，在 CSS 中通过设置 display 为 inline-block 并且设置 line-height 相等的方式来实现两行文字水平对齐：

p {
  font-size: 20px;
}
.text1,
.text2 {
  display: inline-block;
  vertical-align: middle;
  line-height: 30px; /* 这里可以设置为两行字体的高度 */
}
.text1 {
  font-size: 24px;
  font-weight: bold;
}
.text2 {
  font-size: 16px;
  color: gray;
} 

注意，其中的 vertical-align 属性可以将两行文本垂直居中对齐。如果两行文本的高度不一致，可以通过设置 line-height 的值为两行字体的高度来实现。