将 <text> 放在 vue native 中的按钮中间
put <text> in middle of button in vue native
我想把 "login" 文字放在按钮中间,我试过 align-items: center;
和 justify-content: center;
但似乎不起作用
<template>
<view class="container">
<view class="inputContainer">
<text-input v-model.trim="loginObj.memberCode" class="username" placeholder="username"></text-input>
<text-input v-model.trim="loginObj.password" class="password" placeholder="password"></text-input>
<text class="forgotPassword">forgot password?</text>
</view>
<view>
<touchable-opacity class="button" :on-press="login">
<text class="loginText">login</text>
</touchable-opacity>
</view>
</view>
</template>
css
.container {
background-color: white;
margin-top: 250px;
align-items: center;
}
.button {
padding: 10px;
background-color: #0b5376;
width: 250px;
height: 50px;
border-radius: 15;
margin-top: 20px;
}
.loginText {
color: white;
font-weight: bold;
font-size: 18px;
}
https://weex.apache.org/docs/styles/text-styles.html#reference
你可以试试:
text-align: center
我想把 "login" 文字放在按钮中间,我试过 align-items: center;
和 justify-content: center;
但似乎不起作用
<template>
<view class="container">
<view class="inputContainer">
<text-input v-model.trim="loginObj.memberCode" class="username" placeholder="username"></text-input>
<text-input v-model.trim="loginObj.password" class="password" placeholder="password"></text-input>
<text class="forgotPassword">forgot password?</text>
</view>
<view>
<touchable-opacity class="button" :on-press="login">
<text class="loginText">login</text>
</touchable-opacity>
</view>
</view>
</template>
css
.container {
background-color: white;
margin-top: 250px;
align-items: center;
}
.button {
padding: 10px;
background-color: #0b5376;
width: 250px;
height: 50px;
border-radius: 15;
margin-top: 20px;
}
.loginText {
color: white;
font-weight: bold;
font-size: 18px;
}
https://weex.apache.org/docs/styles/text-styles.html#reference
你可以试试:
text-align: center