在微信小程序flex布局中,如何使弹出的对话框中间的文本“至”字居中,试了各种办法都达不到

img


请教各位,在微信小程序flex布局中,如何使弹出的对话框中间的文本“至”字居中,现在偏下,试了各种办法都达不到,谢谢!

<block wx:if="{{isShowConfirm}}">
      <view class='toast-box'>
        <view class='toastbg'></view>
        <view class='showToast'>
            <view class='toast-main'>
                <view class='toast-input1'>
                    <input class='toast-input' type='text'  bindinput='setValue' placeholder="支持单个输入" data-name='stuEidtName'></input>
                    <text class="zhi1">至</text>
                    <input class="lishu1" type='text'  bindinput='setValue' placeholder="请以数字结尾" data-name='stuEidtName'></input>
                </view>
               
            </view>
            <view class='toast-button'>
                <view class='button1'>
                    <view catchtap='cancel'>取消</view>
                </view> 
                 <view class='button2'>
                    <view  catchtap='confirmAcceptance'>确定</view>
                  </view>
            </view>
        </view>
    </view>
  </block>





WXSS:
.toast-box {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: fixed;
  top: 0px;
  left: 0px;
}
.toastbg {
  opacity: 0.5;
  background-color: black;
  position: absolute;
  width: 100%;
  min-height: 100vh;
}
 
.showToast {
  position: absolute;
  opacity: 1;
  width: 80%;
  margin-left: 10%;
  margin-top: 70%;
}


.toast-main {
  padding-top: 2vh;
  padding-bottom: 2vh;
  background-color: white;
  text-align: center;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}
.toast-input {
  margin-left: 5%;
  margin-right: 5%;
  margin-top:10%;
  margin-bottom:10%;
  background-color: rgb(240, 240, 240);
  padding-left: 2vh;
  padding-right: 2vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
}
.zhi1{
  color:gray;
}
.toast-input input{
  background-color: rgb(240, 240, 240);
}
.lishu1{
  margin-left: 5%;
  margin-right: 5%;
  background-color: rgb(240, 240, 240);
  padding-left: 2vh;
  padding-right: 2vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
}
.toast-button {
  display: flex;
  background-color: white;
  height:50px;
  width:100%;
  border-radius: 0px;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  border-top:1px solid rgb(211, 211, 211);
}
 
.button1 {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  border-bottom-left-radius: 16rpx;
}
 
.button2 {
  width: 50%;
  border-left:1px solid rgb(211, 211, 211);
  display: flex;
  align-items: center;
  justify-content: center;
  color:#40A4D6;

得看下你的盒子, 然后再设置flex , 最好远程一下