put in middle of button in vue native

Question

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

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

did you try those css proprieties inside your loginText class. — ngawang13, Jun 09 '20 at 11:17

score 1 · Accepted Answer · answered Jun 09 '20 at 11:16

1

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

u can try:

text-align: center

answered Jun 09 '20 at 11:16

ebyte

1,469
2
17
32

thanks, its working now, but do u know how to add box shadow based on this example in `vue native`? i tried a lot but not working – Choy Jun 09 '20 at 11:20

put in middle of button in vue native

1 Answers1