Question

那是为什么？我印象中您可以使用百分比宽度来做到这一点？

请参见以下示例：

    ...    
    static navigationOptions = ({ navigation }) => {
            return{
                title: "Edit Group"+' ',
                headerStyle: {
                    backgroundColor: '#2ca089',
                    elevation: 0,
                    shadowOpacity: 0,
                    borderBottomWidth: 0,
                },
                headerTintColor: '#fff',
                headerRight: (
                    <Button hasText transparent onPress={() => 
                         Alert.alert(
                            "Delete Group",
                            "Are you sure you want to delete this group? It is a non-reversible action!",
                            [
                              {text: 'Yes', onPress: () => console.log('Yes Pressed')},
                              {text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
                            ],

                        )
                    }>
                        <Text>Delete Group</Text>
                    </Button>
                ),
            };
        }    

        constructor(props) {
            super(props)
            this.state = {
                dataSource : [],
                text : '',
                itemNumber : 0,
            }
        }
    ...

.amphead__branding-center {
    width: 55%;
    height: 3.5rem;
    margin: 0 auto;
    border-radius: 15px;
    background-color: green;
  }
  
.amphead__center-logo {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    align-content: center;
    justify-content: center;
    font-family: serif;
    background-color: #000;
    color: #fff;
  }
  .engineering {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: $main-amp-color;
    color: lighten($grate-color, 2%);
  }

“主标头”和“副标头”不在中间吗？

这些资源表明我在做什么应该起作用

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox: center horizontally and vertically

出什么问题了？

Answer 1

与百分比长度无关。

您要水平居中amphead__center-logo，然后将居中属性应用于父对象。

将此添加到您的代码中：

.amphead__branding-center {
    display: flex;
    justify-content: center;
  }

.amphead__branding-center {
  width: 55%;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: 15px;
  background-color: green;
  /* new */
  display: flex;
  justify-content: center;
}

.amphead__center-logo {
  width: 30%;
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  align-content: center;
  justify-content: center;
  font-family: serif;
  background-color: #000;
  color: #fff;
}

.engineering {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: $main-amp-color;
  color: lighten($grate-color, 2%);
}

<div class="amphead__branding-center">
  <div class="amphead__center-logo">
    <span>Main header</span>
    <span class="engineering">Sub Header</span>
  </div>
</div>

Answer 2

您需要将display: flex，justify-content，flex-direction和/或align-items应用于父级。

另外，由于使用flex-direction: column，因此需要使用align-items来水平居中。

.amphead__branding-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55%;
    height: 3.5rem;
    margin: 0 auto;
    border-radius: 15px;
    background-color: green;
  }
  
.amphead__center-logo {
    width: 30%;
    flex-basis: auto;
    font-family: serif;
    background-color: #000;
    color: #fff;
  }
  .engineering {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: $main-amp-color;
    color: lighten($grate-color, 2%);
  }

<div class="amphead__branding-center">
      <div class="amphead__center-logo">
        <span>Main header</span>
        <span class="engineering">Sub Header</span>
      </div>
    </div>

flexbox-与百分比宽度一起使用时，证明内容不起作用

2 个答案: