我在React Native中有一个圆形按钮(由 borderRadius
制作) . 组件中的文本应垂直和水平居中 .
Horyzontally它很好,但无论我做什么,垂直对齐似乎都失败了 . 即使它在具有小fontSize的大cicle上看起来很好,小圆圈证明它是错误的!
<View style = {{
alignItems:'center',
justifyContent:'center',
backgroundColor:'yellow',
borderColor: this.props.color,
width:size, height:size,
borderRadius:size,
borderWidth:borderWidth,
}}>
<Text style = {{
textAlign: 'center',
backgroundColor:'none',
fontSize:fontSize,
lineHeight:fontSize,
}}>
{this.props.title}
</Text>
</View>
虽然已经回答elsewhere,但我无法将文本(在本例中)正确地放在圆圈中 .
正如人们可以在图像上看到 <Text>
-Component的绿色背景,文本不完全居中 . 即使它本身是完美对齐的......
这是世博会的小吃,整个代码减少到必要的和不同的示例尺寸:https://repl.it/@PaulHuchner/Centered-Text-in-Circles
1 回答
你试图将相同的
fontSize
和lineHeight
设置为圆的直径,其中包含borderWidth
的10
.由于
borderWidth
,正在剪切文本并将其覆盖在圆圈上 . 分配给剪切Text
的lineHeight
超出要求,因此显示misaligned
.因此,您需要根据圆的borderRadius减少
fontSize
和lineHeight
,以便为所有尺寸正常运行 .这是一个小吃link