Skip to content
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

Closed
KJlmfe opened this issue Mar 27, 2015 · 13 comments
Closed

How to vertical center and horizontal center <Text>xxx/<Text> ? #325

KJlmfe opened this issue Mar 27, 2015 · 13 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@KJlmfe
Copy link
Contributor

KJlmfe commented Mar 27, 2015

I write code as below:

alignSelf: 'center',
height: 100,
lineHeight: 100

But it's not work for vertical center.

@dbanck
Copy link

dbanck commented Mar 27, 2015

Use flexbox for the surrounding view:

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

This will center any content.

@KJlmfe
Copy link
Contributor Author

KJlmfe commented Mar 27, 2015

justifyContent: 'center', 
alignItems: 'center' 

It's works!

@milkersarac
Copy link

For me I also needed to update lineHeight according to the fontSize.

@brunoreis
Copy link

brunoreis commented Sep 8, 2017

Yes. It seems that on iOS you need to:

justifyContent:'center',
lineHeight:13,
fontSize:13

Android seems to center align by default.

@pacozaa
Copy link

pacozaa commented Sep 12, 2017

software-mansion/react-native-svg#308

Useful link is here!

@JohnDotOwl
Copy link

{{alignSelf: "center"}}

@AishwaryaSurana
Copy link

If the <Text> is multilined than none of the above things work


<View style = {{
    justifyContent: 'center',
    alignItems: 'center'}}>
          <Text style={{alignSelf:'center',fontSize:20,justifyContent:'center',alignItems:'center'}}>
             A very big multiline text that can not be accumulated in a single line is shown here with all the attributes trying to center it</Text>
        </View>
        

@Suraj-Tiwari
Copy link

Suraj-Tiwari commented Nov 18, 2017

@AishwaryaSurana I didn't tested your code but this one will be the easiest solution. Not just text you can align any content in <View> tag. This will work with Everything.

<View style={{justifyContent: 'center', flex: 1}}> <Text style={{textAlign: 'center'}}>A very big multiline text that can not be accumulated in a single line is shown here with all the attributes trying to center it</Text> </View>

@bezsinnyidmytro
Copy link

bezsinnyidmytro commented Nov 29, 2017

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 :)

@jfajardo
Copy link

Is magic!
textAlign: 'center'

@MacKentoch
Copy link
Contributor

MacKentoch commented Apr 13, 2018

Talking about vertical alignment: sometimes on iOS and Android you may encounter a different behaviour.

In case you have a

  • <Text/>
  • surounded by a rounded <View style={styles.roundedContainer} /> as a container

when you apply a borderWidthfix iOS vertical alignment by setting the paddingTop to this borderWith, illustration:

{
  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).

@sumanpula
Copy link

sumanpula commented Apr 18, 2018

Simple use below lines to centre text vertically,

const styles = {
textStyle: {
fontSize: 18,
alignSelf: 'center'
}
};

@joeyespo
Copy link

The following worked for me (on RN 0.55.2)

text: {
  fontSize: 24,
  textAlign: 'center',
  textAlignVertical: 'center',
},

Worked for both cases I needed - <Text> with flex: 1 and when manually setting the height of the <Text> component.

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
jfrolich pushed a commit to jfrolich/react-native that referenced this issue Apr 22, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests