浮动和绝对定位都脱离了文档流，处于文档流中的文字占满整个header，但发现左侧图标的大小影响到了文字的居中

img

img

img


左侧返回图标浮动，右侧按钮绝对定位，中间文字居中。按照我的理解，浮动和绝对定位都脱离了文档流，不会影响到文字，处于文档流中的文字占满整个header，但发现左侧图标的大小影响到了文字的居中，这是为什么

(1)浮动会使元素脱离文档流,但是不会脱离文本流,在于其他盒子的文本内容计算布局的时候,还是占位置的。

(2)绝对定位会使元素脱离文档流,同时也会脱离文本流, 在于其他盒子的文本内容计算布局的时候,不占位置。

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7476348
  • 除此之外, 这篇博客: 微信小程序自定义导航栏（兼容适配所有机型）中的 2、根据状态栏高度，编写header组件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • <template>
    <view class="hy-body-wrap" :style="{'padding-top':style}">
		<image v-if="baseUrl && backImg" class="back-box" :src="baseUrl+'user/back-user.png'" :style="{'height':style}"></image>
		<view class="c-head-wrap" :class="[{'g-border':borderAsync},{'back':!backImg}]" :style="{'padding-top': statusBarH + 'rpx'}">
			<view class="head-flex-box" :style="[{'height': customBarH + 'rpx', 'color': titleTintColor}, bgColor]">
			    <!-- 返回 -->
			    <view v-if="isBack" @tap="goBack" class="go-back-btn g-cen-y">
						
			    </view>
				<view v-else class="right-back"></view>
			    <!-- <slot name="headerL"></slot> -->
			    <!-- 标题 -->
			    <view :class="[{'text-left':platformType !='ios'},{'ff':backImg}]" class="head-title flex1 g-cen-cen" v-if="title">
			        {{title}}
			    </view>
			    <view class="flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
			        <input class=" flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
			    </view>
			    <!-- 右侧 -->
			    <view class="right-back">
			        <slot name="iconfont"></slot>
			        <slot name="string"></slot>
			        <slot name="image"></slot>
			    </view>
			</view>
		</view>
        
		<slot name="body"></slot>
		<slot name="nav"></slot>
		<slot name="search"></slot>
    </view>
</template>
 
<script>
import {mapActions,mapGetters} from 'vuex'
export default {
	data() {
		return {
			statusBarH: this.statusBar,
			customBarH: this.customBar
		}
	},
	props: {
		isBack: { type: [Boolean, String], default: true },
		title: { type: String, default: '' },
		titleTintColor: { type: String, default: '#343434' },
		bgColor: Object,
		center: { type: [Boolean, String], default: false },
		search: { type: [Boolean, String], default: false },
		searchRadius: { type: [Boolean, String], default: false },
		fixed: { type: [Boolean, String], default: false },
		hei:{type:Number,default:0},
		borderAsync:{type:Boolean,default:false},
		backImg:{type:Boolean,default:false}
	},
	computed: {
		style() {
			let hei = `${this.customBarH+this.statusBarH+this.hei}rpx`;
			let _style = hei;
			this.setStatusBarH(this.customBarH+this.statusBarH+'rpx');
			return _style
		},
		...mapGetters(['baseUrl'])
		
	},
	methods: {
		...mapActions(['setStatusBarH']),
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>
<style lang="scss" scoped>
.hy-body-wrap{
	.back-box{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 12;
	}
	.c-head-wrap{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		&.back{
			background-color: #fff;
		}
		.head-flex-box{
			display: flex;
			align-items: center;
			position: relative;
			.flex1{
				flex:1;
			}
			.head-title{
				font-size: 32px;
				&.ff{
					color: #fff;
				}
				&.text-left{
					justify-content: flex-start;
				}
			}
			.go-back-btn{
				padding-left: 31px;
				height: 100%;
				width:80px ;
				box-sizing: border-box;
				&::after{
					content: "";
					width: 14px;
					height: 28px;
					background: url($baseUrl+'icon/jiao-left.png') no-repeat center;
					background-size: cover;
				}
			}
			.right-back{
				width: 30px;
				height: 100%;
			}
			
		}
	}
}
</style>