React - 垂直对齐文本和图标

2024-03-18

我已经尝试了所有方法来垂直对齐图标和文本,代码:

<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(使用前将#替换为@)

React - 垂直对齐文本和图标 的相关文章

  • 为什么需要重置浏览器?

    好吧 我知道这可能不是最好的标题why我们需要重置浏览器 因为浏览器有不同的默认设置 我的问题太长 无法放入标题中 如果每个人 90 的时间都需要使用重置样式表 为什么浏览器需要设置默认样式 无论如何我们都会删除它们 对吗 因为某些规则默认
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type
  • Redux-saga 从操作中获取数据返回patternOrChannel 未定义

    我需要将动态数据从屏幕发送到操作 减速器 并使用该数据从 API 获取数据 但是当我在我的rootSaga我会收到这样的错误 在检查 take patternOrChannel 时未捕获 patternOrChannel 未定义未捕获在 r
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 在 React Native 中将 Props 传递到屏幕

    我已经开始学习 React Native 并且一如既往地从创建可重用组件开始 我了解了如何在创建自定义组件时传递和访问 props 我想在 React Native 中创建一个基本屏幕 它具有通用属性 并且我的应用程序中的所有屏幕都可以设置
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显
  • 如何在悬停标签时显示块div

    如何在悬停标签时打开 div 标签 服务是标签的id services是div标签的id 我的 HTML 代码是 ul li a href Services a li ul div h1 Hello h1 div 我的CSS代码是这样的 S
  • 无法更改 SVG 元素的类名

    我想通过单击按钮来更改应用于 SVG 的类 代码是here http jsfiddle net p19rnmev 我的 SVG 看起来像
  • Overflow:auto 导致子 DIV 的绝对元素消失

    我有一个 div A 我在其中设置了overflow auto 现在在该 div 内 我有两个 div 父 div B 设置为position relative和子 div C 是position absolute 现在的问题是 设置ove
  • h2 设置背景颜色和下划线

    我需要帮助解决这个 CSS 问题 我想要风格 h2 元素的背景颜色仅适用于文本 并且还有边框底部 这是预览 我可以自己做这件事 这并不难 但问题是我无法添加额外的元素 比如 span 标签 内 h2 标签 所以我正在寻找一种纯CSS方式来实
  • Ionic 2 占位符文本样式

    我正在使用 Ionic 2 rc0 开发一个应用程序 并且整个应用程序中有几个仍然需要样式设置的输入字段
  • 仅显示某些路由的组件 - React

    我正在 React 中开发一个带有登录界面的网站 该网站显示一个自定义导航组件 但是我不希望它显示在主路线 即登录页面 上 但据我了解 静态组件不会在路线更改时重新呈现 这准确吗 我正在使用 React Router 来处理所有路由 这是我
  • 如何淡化循环背景图像?

    这里的菜鸟 我试图让我的静态背景变成一个轮播 我当前的html看起来像这样 div class pageContent div 和我的CSS body background url http placehold it 1600x1200 n
  • 将 Sweet Alert 弹出窗口添加到 React 组件中的按钮

    我为 Bootstrap 和 React 找到了这个完美的 Sweet Alert 模块 我在 Meteor 应用程序中使用它 http djorg83 github io react bootstrap sweetalert http d
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • 如何将React版本17降级到16?

    由于 React 17 不支持许多 React 包 如何将 React 版本从 17 降级到 16 假设您使用 npm yarn 或其他节点包管理器 依赖项版本列在package json 搜索react and react dom包下de
  • span 和 iframe 正文中的宽度(以像素为单位)

    我需要知道 a 的宽度 nbsp 以像素为单位 以及是否取决于字体大小 另外 页面中不同元素的情况是否有所不同 还有 就是 nbsp 与常规不同 目的 nbsp 不间断空格 位于正常空格之上是为了防止单词之间出现换行 您可以使用多个 nbs

随机推荐

  • 尝试为 linq 中的日期创建大于、等于或大于动态过滤器

    我一直在尝试为 Linq 创建一个表达式树过滤器 它接受 2 个日期和一串可能的值 小于 等于 大于 我希望将调用格式设置为 Query Where CompareDates x gt x left right less than 我有代码
  • 从标准输入读取密码[重复]

    这个问题在这里已经有答案了 场景 一个交互式 CLI Python 程序 需要密码 这也意味着 没有可能的 GUI 解决方案 在 bash 中 我可以读取密码 而无需在屏幕上重新提示 read s Python 有类似的东西吗 IE pas
  • 如何上传到 Dropbox Public 文件夹并获取公共 URL?

    我遇到一种情况 我需要将文件上传到我的 Dropbox 公共文件夹 并且上传后我需要存储上传文件的公共 url 我正在使用 python 对此的任何帮助都会很棒 Thanks 使用它在您的程序中设置 Python SDK https www
  • iOS 推送通知问题

    我正在做一个项目 其中推送通知功能是关键特征之一 当我在应用程序中时它工作正常 我收到通知并处理该通知 但问题是当我在后台并收到通知时 我在应用程序图标上看到徽章 当我单击该图标时 我的应用程序正在启动 但是didReceiveRemote
  • 在 ASP.Net Core 中创建自定义 HTML 帮助器

    我想创建自己的自定义 HTML Helper 就像 ASP NET MVC 中使用的那样 但我一直无法找到如何以正确的方式实现它们 我已经找到了如何创建自定义标记帮助程序 但没有找到 HTML 帮助程序 如何创建我自己的自定义 HTML 帮
  • 从 onLoadFinished() 中的光标填充小部件

    我想知道如何使用CursorLoader填充屏幕上的小部件 网上的所有示例仅适用于使用适配器 而且效果很好 我需要的是一种可靠的方法来从光标和 UI 线程上更新屏幕中的视图 并且有时不会因为以下原因而崩溃StaleDataException
  • 它有一些专门针对 tibble 和管道内衬副作用的函数吗?

    我想知道是否可以使用 dplyr select dplyr mutate 或 dplyr transmute 等函数来调用副作用函数 我有步行 但不是来自同一家庭 tibble as tibble mtcars gt dplyr trans
  • Chrome for IOS 无法在 iframe 中正确打开新窗口

    我正在尝试在 iframe 内的 Chrome for iOS 中的新窗口中打开链接 但 Chrome for iOS 不会在新窗口中打开链接 而是浏览器在同一窗口中而不是在新窗口中打开链接 对于弹出窗口也是如此 很奇怪 Example 测
  • 带有不可见项目的微格式 hreview

    我正在一个网站上实现微格式的 hreview 部分 以供 Google 索引 http www google com support webmasters bin answer py answer 146645 http www googl
  • 确保文件在 JVM 退出时被删除

    即使 JVM 提前终止 File deleteOnExit 是否也能保证文件被删除 正如蒂姆 本德所说 File deleteOnExit 不保证文件确实被删除 但是 在 Unixish 系统 例如 Linux 或 OSX 上 可以删除临时
  • 如何在同一个存储库中保留/维护公共和私有代码? (在存储库托管处)

    我正在开发自己的项目 该项目分为两部分 A 内核 通用代码 公共部分 B 适用于专有协议等的代码 私有部分 可供我和一些授权人员使用 我想要存储库托管 可能是 github assembla 它允许在同一存储库中的公共和私有分支中工作 我不
  • 向 sqlite 数据库添加列

    我正在尝试将在 R 中生成的向量作为新列添加到 sqlite 表中 为此我想使用dplyr 我安装了最新的开发版本以及dbplyr根据这篇文章打包here https www r bloggers com dplyr 0 6 0 comin
  • 标签中可以包含任何类型的标签吗?

    是否有诸如 div div
  • Cakephp 2.0 和基本身份验证

    我已将我的应用程序从 CakePHP 1 3 升级到 2 0 4 以前 我只能在一个控制器中使用安全组件来模拟基本 HTTP 身份验证 我曾经做过这样的事情 this gt Auth gt allow array this gt Secur
  • 使用 sqlparse 解析 CASE WHEN 语句

    我有以下 SQL 查询并想使用它来解析它sqlparse https github com andialbrecht sqlparse import sqlparse query select SUM case when A dt unix
  • postgres docker 容器中的 pg_restore

    我正在尝试使用 pg restore 从将从 docker 文件调用的 shell 脚本中恢复 PostgreSQL docker 容器中的数据库 我收到以下错误 错误 取消自动清理任务 CONTEXT 自动分析表 tablename Do
  • SwitchPreference (PreferenceAtivity) - Android NULL

    我有一个屏幕首选项 因此使用了 PreferenceActivity 我已经构建了所有内容并正常运行 但是通过单击文本 SwitchPreference 即行上的任何位置而不位于同一开关中 他可以使用手机 版本 4 1 2 因空指针异常而爆
  • 如何在 Apache Airflow 中正确处理夏令时?

    在气流中 一切都应该是 UTC 不受 DST 影响 但是 我们的工作流程可以根据受 DST 影响的时区交付内容 一个示例场景 我们安排了一项作业 开始日期为东部时间上午 8 00 计划间隔为 24 小时 每天东部时间上午 8 点 调度程序会
  • 包含实例方法委托的静态字典

    我有一个带有巨大 switch 语句的方法 如下所示 public bool ExecuteCommand string command string args bool result false switch command case c
  • React - 垂直对齐文本和图标

    我已经尝试了所有方法来垂直对齐图标和文本 代码