CSS样式处理.md · 木之南/小程序

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

文件

克隆/下载

CSS样式处理.md 904 Bytes

提交于 2022-09-27 22:36 . my first commit

#### 1、居中处理

----

文字居中：`text-align`

水平居中：`line-height`（与父元素高度一致）

垂直居中页面多元素一次性垂直居中：用flex布局-水平居中父元素，`display: flex;flex-direction: column, align-items: center;`垂直居中子元素 `line-height（与父元素高度一致）`

例如：

![image-20220927221143781](C:\Users\45998\AppData\Roaming\Typora\typora-user-images\image-20220927221143781.png)

代码：

```html
<view class="post-author-date">
    <image catch:tap="onMaxImage" class="post-author" src="{{post.avatar}}"></image>
    <text class="post-date">{{post.date}}</text>
</view>
```



```css
.post-author-date{
  display: flex;
  margin: 10rpx 0 20rpx 10rpx;
  flex-direction: row;
  align-items: center;
}

.post-author-date{
  display: flex;
  margin: 10rpx 0 20rpx 10rpx;
  flex-direction: row;
  align-items: center;
}
```

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

https://gitee.com/zh_lys/applets.git

git@gitee.com:zh_lys/applets.git

zh_lys

applets

小程序

master

木之南/小程序

简介

发行版

贡献者

近期动态

木之南/小程序 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

木之南/小程序