css - 将 View 中的复选框居中对齐 (RN)

标签 css react-native flexbox

我的代码是:

      <View style={{...styles.tableRow, backgroundColor: index % 2 == 1 ? "#F0FBFC" : "white"}}>
        <View style={styles.checkboxContainer}>
          <Checkbox label="" color="success" checkboxStyle={styles.checkbox}/>
        </View>
        <Text style={styles.columnRowTxt}>{members[item].first}</Text>
        <Text style={styles.columnRowTxt}>{members[item].last}</Text>
        <Text style={styles.columnRowTxt}>{item.Weight}</Text>
      </View>

我正在尝试将复选框对齐在该 View 的中心。我最初是在没有风景的情况下尝试的。这是我的风格:

  checkbox: {
    backgroundColor: "yellow",
  },
  checkboxContainer: {
    flexDirection: "row",
    width: "25%",
    backgroundColor: "gray",
    alignItems:"center"
  }

结果是: enter image description here

我也尝试过: 复选框:{ 背景颜色:“黄色”, 对齐 self :“居中”, },

如何使其居中?

最佳答案

alignItems: "center" 

应该是:

justifyContent: "center" 

justifyContent 与 flexDirection 一致,alignItems 与 flexDirection 相反。

关于css - 将 View 中的复选框居中对齐 (RN),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71243704/

相关文章:

javascript - 如何在页面加载时防止 css 关键帧动画?

html - 垂直 CSS 进度条

function - 如何从函数返回值 - React Native

html - 使用 flexbox 在 IE11 中布局不正确

javascript - 是否有垂直响应画廊插件? Jquery 还是 Javascript?

javascript - 我如何将这个图像和评论 div 与 css 结合在一起?

ios - 在动画中查看。 ScrollView

javascript - 为什么我的 TabBar 无法正确呈现在 React Native Router Flux 的顶部位置?

html - Flexbox 2 div 不同的高度

javascript - 如何将三个动画进度条与图像水平对齐?