React - 垂直对齐文本和图标

Question

I have tried all things to align vertically an icon and a text, Code:

<Danger color="secondary" style={{ flex:1,justifyContent: "center",alignItems: "center" }}>
  <ErrorOutline
    className={classes.warning}
  />
  <text numberOfLines={1} style={{ textAlignVertical: "center" }}>
    The last job was canceled
  </text>
</Danger>

Things that I've tried : display, justifyContent, alignItems, flex, flexDirection, etc.

Any advice? Thanks!

Answer 1

Try out this inside render of react code

<div style={{display: 'flex', lineHeight: '40px'}}>
  <img src="https://png.icons8.com/ios/50/000000/user-male-circle-filled.png" height="40"/>
  <div>Welcome User!!!</div>
</div>

And for clear understanding you can find the entire React code for this particular example in this link: https://jsfiddle.net/r6yLmu8t/

You need to give lineHeight for the div tag in which the image/icon and text are there. And make sure that the icon/image height is equal to the lineHeight given to the div.

Hope this will achieve your need of text and icon to be on the same line and text to be at centre of icon/image

Answer 2

<Button light>
    <View style={{flexGrow: 1, justifyContent:'center', alignItems: 'center'}}>
        <Icon name='arrow-back' />
        <Text>Back</Text>
    </View>
</Button>