在 StyledSheets 中将水平线移动到中心答案

【问题标题】：move a horizontal line to the center in StyledSheets在 StyledSheets 中将水平线移动到中心
【发布时间】：2020-10-07 07:09:42
【问题描述】：

我画了一条这样的水平线。但是，它出现在屏幕的左侧。我不想增加宽度。我怎么能把它移到中心？我尝试将它与另一个视图以及 alignContent: 'center' 等一起包装，但它对我不起作用。

<View style={styles.horizontalLine}></View>

  horizontalLine: {
    marginTop: 25,
    width: '80%',
    height: 1,
    //alignContent: 'center',
    //width: 1,
    backgroundColor: '#E0E0E0',
  },

【问题讨论】：

标签： javascript css reactjs typescript react-native

【解决方案1】：

添加一个 alignSelf:'center' 如下所示

 horizontalLine: {
    marginTop: 25,
    width: '80%',
    height: 1,
    //alignContent: 'center',
    //width: 1,
    alignSelf: 'center',
    backgroundColor: '#E0E0E0',
  }

【讨论】：

【解决方案2】：

你可以给水平边距：auto

horizontalLine: {
  // ...
  marginLeft: 'auto',
  marginRight: 'auto',
  // ...
},

【讨论】：

【解决方案3】：

试试这个...

horizontalLine: { margin: 'auto', marginTop: 25, width: '80%', height: 1, backgroundColor: '#E0E0E0', }

【讨论】：