Material UI 图标底部的行与文本底部

Question

我有这个代码：

<td>
    <WarningAmberIcon sx={{ color: '#cc0000' }} />&nbsp;&nbsp; If you cannot print in colour, please <a href="https://www.aviva.ie/insurance/car-insurance/faqs/#documents" target="_blank"> click here for further instruction</a>
</td>

在屏幕上显示时如下所示：

图标底部如何与文字底部对齐？

Answer 1

使用 flex 是一种方法：

<td>
 <div style="display:flex; flex-direction: row; align-items: center">
  your content
 </div>
</td>

您可能会注意到文本不是完全居中，将 line-height 设置为 1 将解决此问题。

Answer 2

您可以添加自定义样式 css 定位

例如：sx={{ position: 'relative', top: '5px' }}

或者您可以将这些图标和文本包装在一个新容器中，并使其成为一个弹性容器。然后将 align-items 值更改为 flex-end

Material UI 图标底部的行与文本底部

Line bottom of Material UI icon with bottom of text

html

css

reactjs

material-ui