Css 垂直对齐图标和文本

在React本地项目上工作：

如何垂直对齐设置图标和设置文本

以下是我对上图的工作代码：

<HomeStack.Navigator headerMode="screen" >
    <HomeStack.Screen name = "Home" children={() => <HomeScreen} />} options={{
      title:'Overview',
      headerTitleAlign: 'center',
      headerStyle: {
        backgroundColor: '#e67e22',
      },
      headerTitleStyle: {
        color: 'white'
      },
      headerRight: () => (

        <Icon.Button name="cog-outline" size={30} 
        backgroundColor="#e67e22" color="white" paddingLeft= {15} >


              <Text>Settings</Text>

        </Icon.Button>
      ),
      headerLeft: () => (
        
      <Icon.Button name="exit-outline" size={30} 
      backgroundColor="#e67e22" color="white" paddingLeft= {15} onPress={() => {signOut()}}>LogOut</Icon.Button>

      )
    }}/>
  </HomeStack.Navigator>

}选择权={{
标题:"概览",，
headerTitleAlign:“中心”，
头型：{
背景颜色：“#e67e22”，
},
头饰样式：{
颜色：“白色”
},
头灯：（）=>(
设置
),
标题左侧：（）=>(
{signOut（）}}>注销
)
}}/>

最终应用程序：

Worknig应用程序：

import*as React from'React'；
从“react native”导入{按钮、视图、文本、TouchableOpacity}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“@expo/vector icons”导入{AntDesign}；
从“@expo/vector icons”导入{MaterialCommunityIcons}；
功能主屏幕（{navigation}）{
返回(
);
}
const Stack=createStackNavigator（）；
函数MyStack（）{
返回(
(
console.log（“按下设置按钮”）}
风格={{
为内容辩护：“中心”，
对齐项目：“居中”，
marginRight:10，
}}>
设置
),
标题左侧：（）=>(
console.log（“按下注销按钮”）}
风格={{
flexDirection:'行'，
为内容辩护：“中心”，
边缘左：10，
}}>
注销
),
}}
/>
);
}
导出默认函数App（）{
返回(
);
}

你是说设置字符串顶部的齿轮图标？是的，有人已经帮过我了，但是太赫兹！谢谢您的快速帮助！：）欢迎您，祝您新年快乐。