为什么文本元素不能在视图中垂直居中？
为什么文本元素不能在视图中垂直居中？
提问于 2020-01-24 20:17:31
使用react-native，我创建了一个自定义按钮，如下所示：
import React, {Component, Fragment} from 'react';
import globalStyles from './../../globals/styles'
import {
Text,
View,
TouchableOpacity,
StyleSheet
} from 'react-native';
export default class MyButton extends Component {
render() {
return (
<TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
<View style={styles.textContainer}>
<Text style={styles.text}>{this.props.buttonText}</Text>
</View>
</TouchableOpacity>
)
}
}
let buttonFontSize = 10;
const styles = StyleSheet.create({
textContainer: {
justifyContent: 'center',
alignItems: 'center',
},
opacitySurface: {
backgroundColor: globalStyles.colors.customerGreen,
width: "25%",
height: 60,
padding: 10,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.8,
shadowRadius: 1.5
},
text: {
textAlign: 'center',
fontFamily: globalStyles.fonts.OpenSans,
color: 'white',
fontSize: buttonFontSize,
}
}
);但此按钮内的文本不能垂直对齐。前提:我是react-native的新手，我几乎可以肯定我错过了一些非常愚蠢的东西。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-01-24 20:21:37
要使属性justifyContent和alignItems起作用，它们必须位于带有display: flex的元素上。
使您的文本居中对齐的是style.text上的textAlign: 'center'属性
在style.textContainer上使用display: 'flex'和flex: 1
textContainer: {
display: 'flex'
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}Stack Overflow用户
发布于 2020-01-24 20:22:49
将css添加到opacitySurface
display: "flex",
justifyContent: "center",
alignItems: "center"它会使你的文本居中
Stack Overflow用户
发布于 2020-01-24 20:27:53
在您的textContainer样式中添加flex: 1：
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59896261
复制相关文章
相似问题
腾讯云开发者
