在图像旁边居中文本答案

【问题标题】：center a text next to an image在图像旁边居中文本
【发布时间】：2021-05-06 10:51:42
【问题描述】：

我有一个名为“工具”的屏幕，它允许我将用户重定向到多个子屏幕。我想在图像中间对齐文本。我必须这样做：

但是我的印象是它在中心没有完全对齐，创建了一个偏移量，我不知道你能不能看到它。

您能否就这一点给我您的帮助，我该如何改进？

代码：

export default function Tools({navigation}) {

  return (
    <ScrollView>
    <View style={styles.screen}>
      <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.account")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Account')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/accounting.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
      <View style={styles.row}>
        <TouchableOpacity
          onPress={() => navigation.navigate('Scan')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/barcode.png")} style={styles.img}/>
        </TouchableOpacity>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.scanProducts")}</Text>
      </View>
      <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.ticket")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Tickets')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/ticket.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
      <View style={styles.row}>
        <TouchableOpacity
          onPress={() => navigation.navigate('Checkout')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/cash-register.png")}
                 style={styles.img}/>
        </TouchableOpacity>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.cash")}</Text>
      </View>
            <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.products")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Products')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/products.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
    </View>
   </ScrollView>
  );
}

风格：

 screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
row: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent:'center',
   width : '100%',
 },
roundButton: {
    marginTop: 20,
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },
  img: {
    width: 50,
    height: 50,
  },

【问题讨论】：

文字覆盖图像？
感谢您的回答，如果不清楚，请见谅。不，我希望文本与现在大致相同，但真正对齐在黄色“圆圈”的中间。如果我们看，当我们走时会创建一个偏移量，文本并不完全位于图像的中间。（实际上我并不觉得它超级显眼，但这是我被要求更正的，但我不知道该往哪个方向走）
如果你在row 中将alignItems: 'center 更改为alignItems: 'baseline'？
你能添加截图吗，但是你在哪里添加了* { outline: 1px dashed #000 }？
试试：img: { width: 50, height: 58, }，我猜你的 50 高度限制了你的块的高度，文本只是写在它的底部

标签： javascript css react-native center

【解决方案1】：

从roundButton 中删除marginTop：

 roundButton: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },

工作示例：Expo Snack

我添加粉红色背景只是为了突出显示该行并显示文本居中，稍后将其删除:)

完整源代码：


export default function Tools({ navigation }) {
  return (
    <ScrollView>
      <View style={styles.screen}>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.account')}
          </Text>
          <TouchableOpacity
            onPress={() => navigation.navigate('Account')}
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <TouchableOpacity
            onPress={() => navigation.navigate('Scan')}
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.scanProducts')}
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.ticket')}
          </Text>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.cash')}
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.products')}
          </Text>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    backgroundColor: "pink",
    margin: 5
  },

  roundButton: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },
  img: {
    width: 50,
    height: 50,
  },
});

【讨论】：

非常感谢您抽出宝贵时间帮助我并以这种方式向我展示，这真是太好了！谢谢！我还添加了以便能够使整个居中。