<navigator url="../myInfo/myOrderCenter" style="width: 150rpx;background-color: #39b54a;border-radius: 20rpx;margin-left: 240rpx;height: 50rpx;" > <view style="color: #ffffff;font-size: 28rpx;text-align: center;" >订单中心</view> </navigator>修改代码让元素上下左右都居中
时间: 2024-03-21 12:37:57 浏览: 16
可以使用 flex 布局来实现元素上下左右都居中的效果。修改代码如下:
```html
<navigator url="../myInfo/myOrderCenter" style="display: flex; justify-content: center; align-items: center; width: 150rpx; background-color: #39b54a; border-radius: 20rpx; margin: auto; height: 50rpx;">
<view style="color: #ffffff; font-size: 28rpx; text-align: center;">订单中心</view>
</navigator>
```
这里加了 `display: flex;`,并使用了 `justify-content: center;` 和 `align-items: center;` 来让元素在水平和垂直方向上都居中。同时,将 `margin-left` 改为 `margin: auto;` 也可以让元素在水平方向上居中。
相关问题
优化以下代码:<!--index.wxml--> <view class="container"> <view class="title">桥梁微检测</view> <view class="button-group"> <navigator url="/pages/regular-check/regular-check">桥梁定期检查</navigator> <navigator url="/pages/frequent-check/frequent-check">桥梁经常性检查</navigator> <navigator url="/pages/bridge-info/bridge-info">桥梁信息</navigator> <navigator url="/pages/bridge-map/bridge-map">桥梁地图</navigator> </view> </view> /* index.wxss */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .title { font-size: 28rpx; font-weight: bold; margin-bottom: 40rpx; } .button-group { display: flex; flex-direction: column; align-items: center; justify-content: center; } button { margin-top: 20rpx; width: 200rpx; height: 80rpx; font-size: 28rpx; background-color: #007aff; color: #fff; border-radius: 10rpx; } /* app.json */ { "pages": [ "pages/index/index", "pages/regular-check/regular-check", "pages/frequent-check/frequent-check", "pages/bridge-info/bridge-info", "pages/bridge-map/bridge-map" ], "window": { "navigationBarTitleText": "桥梁微检测" } }
以下是对代码的优化:
<!--index.wxml-->
<view class="container">
<view class="title">桥梁微检测</view>
<view class="button-group">
<navigator url="/pages/regular-check/regular-check">桥梁定期检查</navigator>
<navigator url="/pages/frequent-check/frequent-check">桥梁经常性检查</navigator>
<navigator url="/pages/bridge-info/bridge-info">桥梁信息</navigator>
<navigator url="/pages/bridge-map/bridge-map">桥梁地图</navigator>
</view>
</view>
/* index.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.title {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 40rpx;
}
.button-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
margin-top: 20rpx;
width: 200rpx;
height: 80rpx;
font-size: 28rpx;
background-color: #007aff;
color: #fff;
border-radius: 10rpx;
}
/* app.json */
{
"pages": [
"pages/index/index",
"pages/regular-check/regular-check",
"pages/frequent-check/frequent-check",
"pages/bridge-info/bridge-info",
"pages/bridge-map/bridge-map"
],
"window": {
"navigationBarTitleText": "桥梁微检测",
"navigationStyle": "custom"
}
}
优化说明:
1. 去除无用的空格和换行符,使代码更加简洁。
2. 对于不需要使用的样式,可以直接省略,避免代码过于冗余。
3. 将`button`标签改为`navigator`标签,因为在小程序中,`button`标签是需要绑定事件的,而在这里,我们只需要跳转页面,所以使用`navigator`标签更加合适。
4. 在`app.json`中添加了`navigationStyle`字段,用于设置导航栏样式为自定义,这样我们就可以在每个页面单独定义导航栏的样式,提高了页面的灵活性。
<!--pages/complete/complete.wxml--> <navigator url="../address/address"> <view wx:if="{{hasAddress}}" class="orders-address"> <text class="orders-address-name">收货人: {{address.name}}</text> <text class="orders-address-phone">电话: {{address.phone}}</text> <view class="orders-address-detail">{{address.detail}}</view> </view> <view wx:else class="orders-no-address">添加收货地址</view> </navigator> <view class="order_pay_wrap" bindtap="balance1"> 结算 </view>帮我优化这个代码,并且写一个漂亮的wxss
<!--pages/complete/complete.wxml-->
<view class="container">
<navigator url="../address/address">
<view class="address-wrapper">
<view wx:if="{{hasAddress}}" class="address">
<text class="name">{{address.name}}</text>
<text class="phone">{{address.phone}}</text>
<view class="detail">{{address.detail}}</view>
</view>
<view wx:else class="no-address">添加收货地址</view>
<image class="arrow" src="../../images/arrow-right.png"></image>
</view>
</navigator>
<view class="pay-button" bindtap="balance1">结算</view>
</view>
/* pages/complete/complete.wxss */
.container {
padding: 20rpx;
background-color: #F2F2F2;
}
.address-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 20rpx;
margin-bottom: 20rpx;
}
.address {
display: flex;
flex-direction: column;
}
.name {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.phone {
font-size: 26rpx;
color: #666666;
margin-bottom: 20rpx;
}
.detail {
font-size: 26rpx;
color: #666666;
line-height: 1.5;
}
.no-address {
font-size: 28rpx;
color: #666666;
}
.arrow {
width: 30rpx;
height: 30rpx;
}
.pay-button {
display: block;
width: 100%;
background-color: #FFC900;
color: #FFFFFF;
font-size: 32rpx;
text-align: center;
padding: 20rpx;
border-radius: 10rpx;
}