在本机反应中，Flexbox中的文本垂直居中对齐

Posted 2023-03-06

【中文标题】在本机反应中，Flexbox中的文本垂直居中对齐

【英文标题】：Align text vertically center in Flexbox in react native

【发布时间】：2021-10-01 20:33:01

【问题描述】：

我想在 flex 容器内垂直对齐文本。我使用以下代码与 aligncontent ， justifycontent 等如下。

<Col
            size=1
            style=
              padding: 10,
              justifyContent: "center",
              alignContent: "center",
              backgroundColor: "orange",

              borderRightColor: "#373738",
              borderWidth: 1,
            
          >
            <Text
              style=
                flex: 1,
                backgroundColor: "red",
                fontSize: 14,
                alignItems: "center",
                textAlign: "center",

                color: "#fff",
              
            >
              ago
            </Text>
          </Col> 

但它们都不起作用，请看下面。文本仍然没有垂直居中对齐。

【问题讨论】：

不，没用。

如果您使用的是自定义字体，可能是因为字体的垂直填充，例如poppins。添加includeFontPadding: falsereactnative.dev/docs/… 解决了这个问题。另外，抱歉我之前的评论应该是textAlignVertical: 'center'

是的，我之前试过了，还是不行。

你能创建一个例子吗？在snack 上尝试您的代码效果很好

【参考方案1】：

尝试将 Text 中的样式设置为 display: flex; align-items: center; height: 100%;

【讨论】：

codepen.io/Svarog1389/pen/MWmrbzg 看到这支笔，我试图最小化地重新创建你的例子。尝试从父 div 中删除不必要的 css 属性。例如，如果组件内部没有 display: flex，justifyContent 和 alignContent 不会执行任何操作，而 flex: 1 仅适用于具有 display: flex 的组件的子组件。