-
Notifications
You must be signed in to change notification settings - Fork 24.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to vertical center and horizontal center <Text>xxx/<Text> ? #325
Comments
Use flexbox for the surrounding view:
This will center any content. |
It's works! |
For me I also needed to update lineHeight according to the fontSize. |
Yes. It seems that on iOS you need to:
Android seems to center align by default. |
software-mansion/react-native-svg#308 Useful link is here! |
{{alignSelf: "center"}} |
If the
|
@AishwaryaSurana I didn't tested your code but this one will be the easiest solution. Not just text you can align any content in
|
I don't sure that everyone understand the problem, encountered this issue many times. You have View which must have fixed width, height (circle for example: square with rounded corners 50%). This block can't have flex: 1 property, cause width or height (depending on flexDirection) wont work. You need to vertically and horizontaly align text of Text component inside this NON-flex block, textAlign will do horizontal alignment, lineHeight might do vertical alignment, but lineHeight on Android produces not the same result as on iOS... ok, if you dont set flex: 1 property you still can set width, height and use alignItems and justifyContent, problem solved :) |
Is magic! |
Talking about vertical alignment: sometimes on iOS and Android you may encounter a different behaviour. In case you have a
when you apply a {
roundedContainer: {
alignItems: 'center',
justifyContent: 'center',
height: 120,
width: 120,
borderRadius: 60,
// iOS fix vertical alignment due to borderWidth:
borderWidth: 15,
...Platform.select({ ios: { paddingTop: 15 }, android: {} }),
}
} I'm using a recent RN (0.51) and this may not be an issue due to RN but native behaviour (I suppose since I didn't take time to check sources). |
Simple use below lines to centre text vertically, const styles = { |
The following worked for me (on RN
Worked for both cases I needed - |
I write code as below:
alignSelf: 'center',
height: 100,
lineHeight: 100
But it's not work for vertical center.
The text was updated successfully, but these errors were encountered: