小程序表单左边和右边对齐中线的具体wxss代码
时间: 2024-10-24 17:03:41 浏览: 18
微信小程序 WXML、WXSS 和JS介绍及详解
在微信小程序中,如果你想让表单的左右两个元素相对于页面中心线对齐,你可以使用 Flexbox 布局配合 `align-items` 属性来实现。以下是一个简单的示例,假设你有两个 `view` 元素,分别代表左右两个表单项:
```html
<view class="container">
<view class="item left">左对齐内容</view>
<view class="item right">右对齐内容</view>
</view>
```
然后在对应的 `.container` 和 `.item` 的 CSS 中设置样式:
```css
.container {
display: flex;
justify-content: center; /* 主轴(默认为横向)居中 */
align-items: center; /* 轴向居中,使得子元素垂直居中 */
height: 100%; /* 高度自适应,可根据需要调整 */
}
.item {
flex: 1; /* 自适应宽度,这里保证左右元素等宽 */
margin: 0 10rpx; /* 可适当添加间距 */
}
```
在这个例子中,`.left` 和 `.right` 都会水平居中,并且它们的宽度会自动调整以保持相等。
阅读全文