Search code examples
cssvue.jsvue-native

put <text> in middle of button in vue native

I want to put the "login" text in the middle of the button, I have tried align-items: center; and justify-content: center; but it seems not working

enter image description here

  <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;
}
Solution

  • https://weex.apache.org/docs/styles/text-styles.html#reference

    u can try:

    text-align: center