fix(ui): Navbar 标题改 View 包裹修复 text 绝对定位宽度收缩导致的不居中
This commit is contained in:
parent
dd92496088
commit
23e61ba966
|
|
@ -28,11 +28,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// 绝对定位居中:与 back 按钮是否存在无关,免手动平衡宽度
|
// 绝对定位居中:与 back 按钮是否存在无关,免手动平衡宽度
|
||||||
.title {
|
// 外层必须是 View(block 元素):text 标签在 absolute 下宽度收缩、
|
||||||
|
// left+right 无法撑开宽度,text-align:center 会失效
|
||||||
|
.titleWrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 120px;
|
left: 120px;
|
||||||
right: 120px;
|
right: 120px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $color-text;
|
color: $color-text;
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,10 @@ export function Navbar({
|
||||||
<View className={styles.backArrow} />
|
<View className={styles.backArrow} />
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
<Text className={styles.title}>{title}</Text>
|
{/* title 用 View 包裹:text 标签 absolute 定位下宽度收缩导致居中失效 */}
|
||||||
|
<View className={styles.titleWrap}>
|
||||||
|
<Text className={styles.title}>{title}</Text>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue