css - 如何将文本与其他居中文本对齐

Question

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

<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，这样它将脱离正常的内容流，并确保小时/分钟在容器中居中。

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

---

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

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