微信小程序--字体水平垂直居中

方法一

利用 line-height，使line-height的值与view的height一致即可

wxml

<view class='container'>海轰
</view>

wxss

.container{width: 400rpx;height: 100rpx;text-align: center;line-height: 100rpx;background: yellowgreen;
}

效果

方法二

使用 flex 弹性布局

wxss使用下面的代码：

display: flex;
justify-content: center;
align-items: center;

wxml

<view class='container'>这是个例子
</view>

wxss


.container{width: 400rpx;height: 200rpx;display: flex;justify-content: center;align-items: center;background: yellow;
}

效果图

当然view里面嵌入text也行

wxml

<view class='container'><text>这是个例子</text>
</view>

效果和不使用text一样。

但是使用text时，text中的空格也会算

wxml

<view class='container'><text>这是个例子</text>
</view>

wxss不变
效果图

微信小程序--字体水平垂直居中相关推荐

微信小程序view水平垂直居中完美解决
微信小程序view水平垂直居中完美解决 .view_box{display: flex;align-items: center;justify-content: center;width: 100%; ...
微信小程序文字水平垂直居中对齐问题（完美解决方案）
我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...
关于微信小程序文字水平垂直居中
1.用line-height的值和view的height值一样 wxml: <view class='container'>这是个例子 </view> wxss: .conta ...
微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
微信小程序字体设置教程
准备字体文件下载一个 .ttf 类型的字体文件, 备用戳这里下载获取字体文件地址微信开发者工具>云开发存储>存储管理>上传文件>点击文件名>复制下载地址项目引入 ...
微信小程序--字体展示
以下为微信小程序font-family中提供的十四种字体如果同时设置font-size,有时会对font-family的效果产生干扰,导致字体设置无效,需注意字体大小问题. 字体一 font-fam ...
Taro微信小程序字体引入
Taro微信小程序要引入新的字体可以全局引入,在app.jsx的componentDidMount中使用Taro.loadFontFace 注意: source的下载地址只能使用经过备份的域名运行时 ...
全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果首页功能主要有搜索(下篇文章介绍) 图书列表图书列表分析一波: 列表是水平滑动点击列表会有按压效果:布局整体缩小每个布局的信息从上到下排列分别是:图片.书名.作者.出版社每个布局 ...
PC端微信小程序字体无法显示加粗
今天开发发现,在手机中可以看到加粗文字,pc端无法显示,对比了下美团小程序,也是这样,这是微信的bug,不知道他什么时候能修复了.坐等...

微信小程序--字体水平垂直居中

方法一

方法二

微信小程序--字体水平垂直居中相关推荐

最新文章

热门文章