How do I align text next to other centered text

Question

I have two pieces of text. I need the first piece to be centered horizontally and vertically, and the second to just be right next to it. Currently the code looks like this:

<View style={styles.runningTimeWrapper}>
  <Text style={styles.loggedTime}>00:00</Text>
  <Text style={[styles.loggedTime, styles.loggedSeconds]}>00</Text>
</View>

How can I style it so the 00:00 is centered? Using fixed widths is not an option as I need this to work on any screen size.

Here is how it looks currently:

Styles:

  loggedTime: {
    color: Variables.PURPLE,
    fontSize: 44,
    alignSelf: 'center',
  },
  loggedSeconds: {
    fontSize: 22,
    alignSelf: 'flex-end',
    paddingBottom: 8
  },

  runningTimeWrapper: {
    flexDirection: 'row',
    justifyContent: 'center',
    flex: 1,
  },

The desired effect is to have the column of hh:mm aligned with the center of the screen, and the seconds directly next to the minutes.

On all 'center' references, I am talking about horizontal center (x-axis), not vertical(y-axis) (which is set using alignItems /self)

Answer 1

You can set the second span to position:absolute , so it will be out of the normal content flow, and ensure the hour/minute to be centered in the container.

 .wrapper { display: flex; justify-content: center; position: relative; font-family: sans-serif; } .hm { font-size: 44px; } .s { font-size: 22px; position: absolute; bottom: 5px; } 

 <div class="wrapper"> <span class="hm">12:34</span> <span class="s">56</span> </div> 

---

In fact, you don't really need flexbox, the text-align:center is probably enough to do it.

 .wrapper { text-align: center; position: relative; font-family: sans-serif; } .hm { font-size: 44px; } .s { font-size: 22px; position: absolute; bottom: 5px; } 

 <div class="wrapper"> <span class="hm">12:34</span> <span class="s">56</span> </div> 

Answer 2

You'll need 3 inner wrapper views: an empty one on the left and then wrap the small and big numbers in their own wrapper each. Then give the left and right wrappers flex: 1 to make them the same width.

https://rnplay.org/apps/hLBFng

Answer 3

I'm not 100% certain I understand what you're going for. Are you trying to get the loggedTime to be perfectly centered and the loggedSeconds to be offset to the right of that? Or are you simply trying to get both to be center/center?

I think I was able to get something going here by setting flexDirection: 'row' and adding some paddingTop to the seconds.

Here's a demo on rnplay.org

var styles = StyleSheet.create({
 loggedTime: {
    color: '#FF5500',
    fontSize: 44,
    alignSelf: 'center',
  },
  loggedSeconds: {
    fontSize: 22,
    paddingTop: 20,
    paddingBottom: 8
  },

  runningTimeWrapper: {
    flexDirection: 'row',
    justifyContent: 'center',
    flex: 1,
  },
});