Is there a way to position the "login" text in the center of the button? I've attempted using align-items: center; and justify-content: center;, but it doesn't seem to be working
https://i.sstatic.net/XVHWA.png
<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;
}