如何将文本与其他居中文字

Question

我有两段文字。我需要第一件水平和垂直居中，第二件就在它旁边。目前代码如下所示：

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

我如何设计它以使00:00居中？使用固定宽度不是一个选项，因为我需要它来处理任何屏幕尺寸。

以下是目前的情况：

样式：

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

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

所需的效果是让hh：mm的列与屏幕的中心对齐，以及直接在分钟旁边的秒。

在所有'中心'参考文献中，我说的是水平中心（x轴），而不是垂直（y轴）（使用alignItems / self设置）

Answer 1

您可以将第二个范围设置为position:absolute，因此它将超出正常的内容流量，并确保小时/分钟在容器中居中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

事实上，你并不真正需要flexbox，text-align:center可能就足够了。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要3个内部包装器视图：左侧是空的，然后将每个小的和大的数字包装在自己的包装器中。然后给左右包装器flex：1使它们具有相同的宽度。

https://rnplay.org/apps/hLBFng

Answer 3

我不是100％肯定我明白你的目标。您是否试图让loggedTime完全居中，而loggedSeconds会偏向右侧？或者你只是想让两者都成为中心/中心？

我认为我可以通过设置flexDirection: 'row'并在秒中添加一些paddingTop来获得一些信息。

这是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,
  },
});