Стиль Flexbox - попытка центрировать виды

Question

Я создаю приложение React Native, и у меня ужасное время, когда все центрируется.Все всегда немного не в центре:

  <View style={{
    flex: 1,
    flexDirection: 'column',
  }}>
    <View styleName="green-header">
      <Text styleName="green-header-text">Log In to Your Account</Text>
    </View>
    <View styleName="loginbuttongroup">
      <TouchableOpacity styleName="googlered loginbutton" onPress={() => this.onGoogleLoginButtonPress()}>
        <Text styleName="login-text">Log In with Google</Text>
        <Image styleName="login-img" sourcec={GoogleImg} />
      </TouchableOpacity>
      <TouchableOpacity styleName="facebookblue loginbutton"
        self={this} onPress={() => this.onFBLoginButtonPress()}>
        <Text styleName="login-text">Log In with Facebook</Text>
        <Image styleName="login-img" source={FBImg} />
      </TouchableOpacity>
    </View>
    <TouchableOpacity styleName="bottomtext">
      <Link to="/signup/">
        <View styleName="bottomtext-text-view"><Text styleName="bottomtext-text">Don't have an account? Sign Up</Text></View>
      </Link>
    </TouchableOpacity>
  </View>

Я использую модуль, который позволяет мне писать стили, такие как CSS (это то, что применяются атрибуты styleName выше):

.green-header {

  height: 40;
  width: 400;
  margin-top: 20;
  align-items: center;
}
.green-header-text {
  height: 40;
  width: 200;
  color: #31bdbc;
  font-size: 16;
}
.login-text {
  color: #fff;
}
.facebookblue {
  background-color: #3b5998;
  color: #fff;
}
.googlered {
  background-color: #db3236;
  color: #fff;
}
.loginbutton {
  width: 80%;
  font-size: 14px;
  margin-top: 5;
  justify-content: center;
  align-items: center;
}
.loginbuttongroup {
  height: 400;
  width: 40%;
  justify-content: center;
  align-items: center;

}
.login-img {
  width: 20;
  height: 20;
  align-self: flex-end;
}
.bottomtext {
  width: 300;
  height: 300;
align-self: flex-end;
}
.bottom-text-text-view {
  width: 50;
  height: 50;
}
.bottomtext-text {

  color: #31bdbc;
  font-size: 14px;
}

Теперь, исходя из этого, я ожидал бы, что моя группа входа в систему расположена вертикально по центру, и каждая из кнопок входа в систему составляет 80% ширины контейнера (которая установлена ​​на 40% - если я увеличу ее, кнопки исчезнут с экрана).).Наряду с этим, я ожидаю, что нижний текст будет внизу.Он даже не обнаруживается.

Что я здесь не так понимаю о flexbox?Я только что поднял его две недели назад, и у меня чертовски непросто все сделать правильно.

Answer 1

Попробуйте установить для внешнего вида значение Justify-content: center, а для всех кнопок - margin: auto.Если позиционирование отключено, иногда это происходит из-за того, что поля неправильно выровнены из унаследованного бита css.

Answer 2

вы должны указать контейнер justify-content: center, а не элемент в контейнере