假如我们要居中的是一个text
正常情况下,我们只需要给他一个text-align:center
然后给他个view框架
给view设个样式
display:flex
//导入弹性布局
flex-direction:column
//方向为垂直
align-items:center
//垂直居中
justify-content:center
//水平居中
有的时候呢,
我们的新手小朋友们可能会遇到这样的问题
就是垂直和水平居中没用?
那是你的样式没有宽和高
设置一哈宽和高就阔以啦
举个栗子
<view
style="height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content: center">
<text style="background-color:yellow;text-align:center">你好!text>
view>
先给框架设固定的宽和高
设的时候
高可不能设为100%
因为view默认是被撑开的
也就是说里面东西有多大
他就有多高
而vh这个单位正是设置固定的高
另外呢
还有一个单位叫做vw
相信聪明的小伙伴已经能举一反三了
没错,就是固定的宽
我们把它设个高宽可以看的更清晰
他已经在第一行居中了,
此外,还有一些字体样式供大家参考
font-size 字体大小
color 字体颜色
line-height 行高
一些冷门的属性
1.font-style:文字样式。
取值:normal 正常的字体, italic 斜体字, oblique 倾斜的字体。
2.font-weight:设置文本字体的粗细。取值范围为100-900.
取值:mormal:正常大小相当于400。bold :粗体,相当于700。bolder, lighter。
3.font-size:设置字体尺寸大小。
4.font-variant:设置对象中的文本是否为小型的大写字母。
取值:mormal 正常的字体。small-caps 小型的大写字母字体。设置了以后会不论原来是否为大小字母 全部改为大写。
5.font-family:设置字体名称。
6.font-stretch:设置对象中的文字是否横向拉伸变形。
取值:normal:正常文字宽度。
ultra-condensed:比正常文字宽度窄4个基数。
extra-condensed:比正常文字宽度窄3个基数。
condensed:比正常文字宽度窄2个基数。
semi-condensed:比正常文字宽度窄1个基数。
semi-expanded:比正常文字宽度宽1个基数。
expanded:比正常文字宽度宽2个基数.
extra-expanded:比正常文字宽度宽3个基数。
ultra-expanded:比正常文字宽度宽4个基数。