css块级元素和文字对齐问题记录

按照设计稿居中对齐

首版：

<template>
    <view class="activity-title border-box">
	    <text class="sport-type">羽毛球</text>
	    <text class="title">这是标题</text>
    </view>
</template>

<style lang="scss" scoped>
	.activity-title {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f8f8f8;
		.sport-type {
			display: inline-block;
			height: 38rpx;
			line-height: 38rpx;
			text-align: center;
			background-color: #5e9fed;
			border-radius: 4rpx;
			padding: 0 10rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #fff;
		}
		.title {
			line-height: 48rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: #333;
		}
	}
</style>

 效果如图，标签和文字没有居中对齐，这里涉及文字换行后在标签下方样式，不能使用flex布局(这样会让两个子元素变成块级元素，达不到设计稿效果)

 考虑到的解决方案：

1、第一想到flex布局，考虑到设计稿效果排除掉

2、标签设置高度，垂直居中--失败

3、标签margin: auto 0;--失败

4、行内块元素设置 vertical-align: text-top; -- 完成

最终效果：