css使用flex文字不偏移

html-css023

css使用flex文字不偏移,第1张

外部盒子先使用display:flexjustify-content: centeralign-items: center将文字所在的内容盒子水平垂直居中于外部盒子中间，再将内容盒子display:flexalign-items: baseline将内容盒子里面的文字基于第一个文字的底部对齐。

html部分

<div class="box">

<div class="content">

<div class="num">8</div>

<div class="unit">折</div>

</div>

</div>

登录后复制

css部分

.box{

background-color: #4773DC

padding: 0

display: flex

justify-content: center

align-items: center

.content{

display: flex

align-items: baseline

.num{

font-size: 50rpx

}

.unit{

font-size: 20rpx

}

}

}

登录后复制

css

通过css控制，根据具体情况控制。

常见的有：

line-height:行高

margin、padding：左右上下的偏移

text-align：文字靠左、靠右、居中

关键还是具体问题具体分析

CSS fixed 缩小自动偏移是指在使用CSS时，可以使用fixed属性来缩小自动偏移，以便更好地控制元素的位置。fixed属性可以让元素固定在一个位置，而不会受到其他元素的影响，从而更好地控制元素的位置。使用fixed属性可以有效的减少自动偏移，从而更好地控制元素的位置。