I want to make my text like this in the picture. But my text is not centring vertically. How to achieve it?
What I have done so far is
<Fragment>
<HeaderMain navigation={navigation}/>
<View style={styles.subheader}>
<Text style={styles.topText}>Заказы</Text>
</View>
</Fragment>
Styles
container: {
flex: 1,
paddingHorizontal: 8,
paddingVertical: 7,
backgroundColor: '#E5E5E5',
},
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
},
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight:21,
fontFamily: MONREGULAR,
marginLeft: 16,
justifyContent: 'center',
alignItems: 'center',
},
You should not use justifyContent
, alignItems
in Text
. You should use it in View
. Also give lineHeight same values as your fontSize. Like this;
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
justifyContent: 'center',
},
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight: 21,
fontFamily: MONREGULAR,
marginLeft: 16,
},
Try this subheader
should be of display:flex
and flex-direction:column
topText
should have justify-content:space-around
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
display: flex;
}
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight:21,
fontFamily: MONREGULAR,
marginLeft: 16,
justifyContent: 'space-around'
}
alignItems and justifyContent are used to adjust components within a view. If what you want is to center the content within a text you should use: textAlign, in your case I think you should use:
textAlign: "center"
subheader:{
height: 55,
backgroundColor: '#ffffff',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
topText:{
fontWeight: "bold",
fontSize: 17,
lineHeight: 21,
fontFamily: MONREGULAR,
marginLeft: 16,
justifyContent: 'center',
alignItems: 'center',
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.