我已经尝试了所有方法来垂直对齐图标和文本,代码:
<Danger color="secondary" style={{ flex:1,justifyContent: "center",alignItems: "center" }}>
<ErrorOutline
className={classes.warning}
/>
<text numberOfLines={1} style={{ textAlignVertical: "center" }}>
The last job was canceled
</text>
</Danger>
我尝试过的事情:display, justifyContent, alignItems, flex, flexDirection, etc.
有什么建议吗?谢谢!
尝试一下反应代码的内部渲染
<div style={{display: 'flex', lineHeight: '40px'}}>
<img src="https://png.icons8.com/ios/50/000000/user-male-circle-filled.png" height="40"/>
<div>Welcome User!!!</div>
</div>
为了清楚地理解,您可以在此链接中找到此特定示例的完整 React 代码:https://jsfiddle.net/r6yLmu8t/ https://jsfiddle.net/r6yLmu8t/
您需要为图像/图标和文本所在的 div 标签指定行高。并确保图标/图像高度等于给定 div 的行高度。
希望这能满足您对文本和图标位于同一行以及文本位于图标/图像中心的需求
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)