css - 如何在同一容器中将标题居中对齐，文本居左对齐？

Question

您好，我正在学习 React Native。我正在尝试创建注册表单。我需要中间顶部的标题和左侧的所有标签字段。以下是我的代码。

 <ScrollView contentContainerStyle={{ flexGrow: 1 }}
    scrollEnabled >
  <View style={styles.fieldsContainer}>
  <View>
  <Text style={styles.headline}>Personal Info</Text>
  </View>
 <Text></Text>

和CSS

    const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    alignItems: 'stretch',
  },
fieldsContainer: {
    flex: 1,
    margin:10,
    paddingTop:30,
    paddingLeft:20,
    backgroundColor: '#D3D3D3',
    alignItems: 'stretch',
    alignItems: 'center',
  },
  textLabelsStyle: {
fontSize:34,
fontWeight:'bold',
color:'black',
  },
  headline: {
    textAlign: 'center', 
    fontWeight: 'bold',
    fontSize: 18,

    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  },

我面临的问题是我无法同时将标题置于中心和将字段标签置于左侧。

Answer 1

将 alignSelf 添加到中心。

<ScrollView contentContainerStyle={{ flexGrow: 1 }}
    scrollEnabled >
  <View style={styles.fieldsContainer}>
  <View style={{alignSelf:'center'}}>
  <Text style={styles.headline}>Personal Info</Text>
  </View>
 <Text></Text>